Question

我想用下一个和上一个按钮创建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>

Answer 1

您的HTML按类名列出了图片＆＃39; SlidePic＆＃39;而不是＆＃39; mySlides＆＃39;。还需要从您反复执行的函数内调用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>

javascript滑块不会自动滑动

1 个答案: