javascript滑块不会自动滑动

Question

I want to create javascript slider with next and previous button. 我想使用下一个和上一个按钮创建javascript滑块。 Now next and previous button works fine.But alone with I need to slide automatically 现在下一个和上一个按钮可以正常工作，但是单独使用时我需要自动滑动

<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

Your HTML has images by class name 'SlidePic' and not 'mySlides'. 您的HTML具有按类名“ SlidePic”而不是“ mySlides”的图像。 Also stTimeOut function needs to be called from within the function that you repeatedly want to execute. 此外，还需要从您反复想要执行的函数中调用stTimeOut函数。 Hope this helps.. 希望这可以帮助..

<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 个解决方案

解决方案1
1 已采纳 2016-06-29 08:42:35

javascript滑块不会自动滑动

问题描述

1 个解决方案

解决方案1 1 已采纳 2016-06-29 08:42:35

解决方案1
1 已采纳 2016-06-29 08:42:35