JavaScript slider 代码

Question

我正在制作 div block 的 js-slider。我有一个指向两侧的箭头。我想当鼠标悬停时水平滚动 slider 。在此之前，我使用此代码完成了所有操作:

  jQuery('.control')
    .bind('click', function(){
        jQuery('#slideInner').animate({
          'marginLeft' : SlideWidth * SlideNumber
        });
  });

但是，如果我想滑动所有内容直到鼠标位于 .control 上，该怎么办？

Answer 1

您应该有一个 setInterval(...) 来在元素悬停时进行延迟循环

var interval = null; // I use global var for this example - globals are discouraged in general
jQuery('.control')
    .hover(function(){
        interval = setInterval(function() { // start looping when mouse enters
            jQuery('#slideInner').animate({
               'marginLeft' : SlideWidth * SlideNumber
            });
        },
        1000); // this is how many milliseconds you want to wait between animations
     }, function(){
        clearInterval(interval); // stop looping when mouse is out
     });

注意:这是一个过于简单化的问题，需要进一步的工作(例如检查边距是否超出范围等)，但其目的是展示 setInterval(...) 是如何实现的已申请解决您的问题。