javascriptスライダが自動的にスライドされない

次と前のボタンでJavaScriptスライダを作成したいと思います。私は自動的にjavascriptスライダが自動的にスライドされない

<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> 
<body> 
    <h2 class="slide">Manual Slideshow</h2> 

    <div class="innerArea" style="max-width:800px;position:relative"> 
     <div class="SlidePic"> 
      <img class="" src="img_fjords.jpg" style=""> 
      <p>Hello</p> 
     </div> 
     <div class="SlidePic"> 
      <img src="image/oracle.png"> 
      <p>Hello1</p> 
     </div> 
     <div class="SlidePic"> 
      <img src="image/oracle.png"> 
      <p>Hello2</p> 
     </div> 
     <div class="SlidePic"> 
      <img src="img_forest.jpg"> 
      <p>Hello3</p> 
     </div> 

     <a class="w3-btn-floating" style="position:absolute;top:45%;left:0" onclick="plusDivs(-1)">></a> 
     <a class="w3-btn-floating" style="position:absolute;top:45%;right:0" onclick="plusDivs(1)"> 
      <</a> 
    </div> 
</body> 

<script> 
    var slideIndex = 1; 
    showDivs(slideIndex); 

    function plusDivs(n) { 
     showDivs(slideIndex += n); 
    } 
function showDivs(n) { 
    if(n=='') 
    n=1; 
    var i; 
var x = document.getElementsByClassName("mySlides"); 
    if (n > x.length) {slideIndex = 1} 
if (n < 1) {slideIndex = x.length} 
for (i = 0; i < x.length; i++) { 
    x[i].style.display = "none"; 
    } 
    x[slideIndex-1].style.display = "block"; 
} 
setTimeout(showDivs, 2000); 
</script>

出典

2016-06-29 user3386779

すべての* auto slider *ロジックが足りないだけです。それには 'setTimeout'や' setInterval'を使いますが、それはあまりにも広すぎて誰もあなたのためにコードを書くことはありません – Justinas

@ Justinas私が試したコードを更新します – user3386779

あなたはslideIndexを増やしていません0番目の要素） – Justinas

あなたのHTMLは、クラス名が「SlidePic」とない「mySlides」で画像を持ってスライドさせる必要があると今すぐ次と前のボタンだけではfine.Butに動作します。また、繰り返し実行する関数内からstTimeOut関数を呼び出す必要があります。これが役に立てば幸いです。

<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> 
    </head> 


<body> 
    <h2 class="slide">Manual Slideshow</h2> 

    <div class="innerArea" style="max-width:800px;position:relative"> 
     <div class="SlidePic"> 
      <img class="" src="img_fjords.jpg" style=""> 
      <p>Hello</p> 
     </div> 
     <div class="SlidePic"> 
      <img src="image/oracle.png"> 
      <p>Hello1</p> 
     </div> 
     <div class="SlidePic"> 
      <img src="image/oracle.png"> 
      <p>Hello2</p> 
     </div> 
     <div class="SlidePic"> 
      <img src="img_forest.jpg"> 
      <p>Hello3</p> 
     </div> 

     <a class="w3-btn-floating" style="position:absolute;top:45%;right:0" onclick="plusDivs(0)">></a> 
     <a class="w3-btn-floating" style="position:absolute;top:45%;left:0" onclick="plusDivs(-2)"><</a> 

    </div> 


<script> 
    var slideIndex = 1; 
    showDivs(slideIndex); 

    function plusDivs(n) { 
     slideIndex += n; 
     showDivs(); 
    } 
function showDivs() { 

    var n = slideIndex; 
    // alert(n) ; 
    if(n==='' || n==='0' || n==="undefined") 
    n=1; 
    var i; 
var x = document.getElementsByClassName("SlidePic"); 
if (n > x.length) {slideIndex = 1} 
if (n < 1) {slideIndex = x.length} 
for (i = 0; i < x.length; i++) { 
    x[i].style.display = "none"; 
    } 
    x[slideIndex-1].style.display = "block"; 
    slideIndex++; 
    var t = setTimeout(function(){showDivs() }, 2000); 
} 


</script> 

    </body> 




</html>

出典

2016-06-29 08:42:35

javascriptスライダが自動的にスライドされない

答えて

関連する問題