当我使用纯javascript制作滑块时，无法使autoslider(）起作用

cannot make autoslider() to function when i am make a slider using pure javascript?

本文关键字：autoslider 起作用 javascript      更新时间：2023-09-26

HTML:

<div class="sliderImage">
  <img src="icon-facebook.png" name="slidershow" />
</div>
<table>
    <tr>
        <td align="left">
            <a href="" class="sliderPrevious">Previous</a>
        </td>
        <td align="right">
            <a href="" class="sliderNext">Next</a>
        </td>       
    </tr>
</table>
<div id="description">
</div>

JavaScript:

<script type="text/javascript">
(function(){
    var Image = new Array('icon-facebook.png','icon-google.png','icon-mail.png','icon-twitter.png');
    var Description = new Array('This is an facebook icon','This is an google icon','This is an mail icon','This is an twitter icon');
    var sliderPrevious = document.getElementsByClassName('sliderPrevious')[0];
    var sliderNext = document.getElementsByClassName('sliderNext')[0];
    var sliderAuto = document.getElementsByClassName('sliderAuto')[0];
    var myAutoSlider;
    var Image_Number = 0;
    var Image_Length = Image.length - 1;
    function change_image(num){
          Image_Number = Image_Number + num;
          if(Image_Number > Image_Length){
              Image_Number = 0;
          }
          if(Image_Number < 0){
            Image_Number = Image_Length;
          }
          document.slidershow.src = Image[Image_Number];
          document.getElementById('description').innerHTML = Description[Image_Number];
          return false;
    };
    function autoSlider(){
        myAutoSlider = setInterval(change_image(1), 1000);
    };
    function myEventLisener(target, event, myNumber){
              target.addEventListener(event, function(e){
                         e.preventDefault();
                         change_image(myNumber);
                         clearInterval(myAutoSlider);//if click ,then stop autoplay
              });          
    };
    autoSlider();
    myEventLisener(sliderPrevious,'click', -1);
    myEventLisener(sliderNext,'click', 1);
}());
</script>

我写了上面的代码来制作一个使用纯js的滑块。使用上面的代码，我可以使用"下一步"answers"预览"按钮，但我不能让它自动播放，autoSlider()功能就是为它设置的。

我试过检查员，但没有发现问题。一切正常，但autoSlider()无法工作。

setInterval函数必须接收回调，但您正在传递函数调用。所以它只执行一次。

您必须将setInterval实现更改为：

function autoSlider(){
    myAutoSlider = setInterval(function(){change_image(1)}, 1000);
};

工作小提琴

相关文章：