2016-05-01 4 views
1

私はW3Schools JavaScriptの章を読んで、イメージスライドを作成しようとしています。私はすべてを最初に行い、最初のラウンドでは適切に動作します。たとえば、次のボタンをクリックすると、スライドショーの最後までスライドがスライドしていき、もう一度クリックすると、すべてのものがリセットされますが、それ以降は動作しません。また、DocTypeの減速を含めると、最初から動作しなくなります。JavaScriptイメージスライダが1ラウンドで機能しますか?

<html lang="en"> 
     <head> 
     <title> 
      Project Name 
     </title> 

     <style> 
* 
{ 
margin: 0px; 
padding: 0px; 
} 

body 
{ 
margin: 25px; 
} 

#slideshow 
{ 
width : 300px; 
height: 300px; 
border: 1px solid #000; 
margin: 0 auto; 

} 

#slides 
{ 
position: relative; 
width: 900px; 
height: 300px; 
transition: 1s; 

} 

.slide 
{ 
width : 300px; 
height: 300px; 
float: left; 
} 
     </style> 
     </head> 

<body> 
    <div id="slideshow"> 
     <div id="slides"> 
      <img class ="slide" src="images/slide1.jpg"> 
      <img class="slide" src="images/slide2.jpg"> 
      <img class="slide" src="images/slide3.jpg"> 
     </div> 
    </div> 

    <button onclick="prev()">prev</button> 
    <button onclick="next()">next</button> 





    <script type="text/javascript"> 
     var value = 300; 
     function next() 
     { 
      var slider = document.getElementById("slides"); 

      if(value == 900) 
      { 
       slider.style.left = "0"; 
       value = 300;   
      } 
      else 
       { 
        slider.style.right = value; 
        value += 300; 
       } 
     } 
    </script> 
</body> 

+1

CSS「左」と「右」には単位が必要です。 '' px ''を追加してください。 – Xufox

+0

まだ1ラウンドで働いています –

+0

あなたの質問に基本的な文法を適用してください:文章は大文字で始まり、ピリオド(。)で終わります。これは私の脳を傷つける。 – Sumurai8

答えて

1

ハードコーディングJS値を設定するようにコードを変更する悪い習慣です。
が ある日、あなたはCSSでスライダーの幅を変更すると、JSの一部で起こっているのだろうかよ...

  1. 応答計算JSとスライドの動的数作ります
  2. 変数c=0
  3. 前/次あなたのカウンターを操作値(LOO カウンタを作成します%
  4. 割合%

var slider = document.getElementById("slides"), 
 
    slide = slider.querySelectorAll(".slide"), 
 
    tot = slide.length, c = 0; 
 

 
function anim() { 
 
    c = c<0 ? tot-1 : c%tot; 
 
    slider.style.left= -100*c +"%"; 
 
}anim(); 
 

 
function next() { ++c; anim(); } 
 
function prev() { --c; anim(); }
#slideshow { 
 
    height: 150px; 
 
    border: 1px solid #000; 
 
    overflow:hidden; 
 
} 
 

 
#slides { 
 
    position: relative; 
 
    height: 100%; 
 
    width: 100%; 
 
    white-space:nowrap; 
 
    font-size:0; /* removes 4px inline-block gap */ 
 
    transition: 1s; -webkit-transition: 1s; 
 
} 
 

 
.slide { 
 
    font-size: 1rem; /* restore font size */ 
 
    display:inline-block; 
 
    vertical-align:top; 
 
    width : 100%; 
 
    height: 100%; 
 
    background: none 50%; 
 
    background-size: cover; 
 
}
<div id="slideshow"> 
 
    <div id="slides"> 
 
    <div class="slide" 
 
     style="background-image:url(http://placehold.it/800x600/0fb);"></div> 
 
    <div class="slide" 
 
     style="background-image:url(http://placehold.it/800x600/bf0);"></div> 
 
    <div class="slide" 
 
     style="background-image:url(http://placehold.it/800x600/f0b);"></div> 
 
    </div> 
 
</div> 
 

 
<button onclick="prev()">prev</button> 
 
<button onclick="next()">next</button>

-100*cにtranistion-アニメーションを使用してpが今、あなたのスライダが応答することを、任意の容器に入れて、それが幅を収容するのです。

+0

ありがとう、ありがとうございます。 –

+0

@MohammadIstanboliよろしくお願いします! –

1

あなたは1ラウンドを終えたら、あなたは0からrightプロパティをバックに設定する必要があります。ここでは

は、CSSとJavaScriptコードとHTMLです。あなたのコードでは leftを0に設定していますが、あなたの権利はまだ 900のままです。これは問題ですので、 right 0に

 if(value == 900) 
     { 
      slider.style.right = "0"; 
      value = 300;   
     } 
関連する問題