重置幻灯片间隔JQuery

我做了一个幻灯片显示宽度一个JavaScript和JQuery。但是当用户手动导航到下一张或上一张幻灯片时，我需要重置幻灯片间隔。我对javascipt比较陌生，它的语法是。任何帮助将appriciated。这里是我的代码：重置幻灯片间隔JQuery

<script type="text/javascript" src="/elements/jquery-1.4.2.min.js"></script> 
<script type="text/javascript"> 
    var currentSlideId = 0; 
    var slidesAmount = 0; 

    function selectSlide(id) { 
     jQuery(".startpage-test.slide" + id).show().siblings(".startpage-test").hide(); 
     jQuery(".slideshow-show-active.slide" + id).addClass("active").siblings(".slideshow-show-active").removeClass("active"); 
    } 

    function nextSlide() { 
     currentSlideId++; 
     if (currentSlideId >= slidesAmount) currentSlideId = 0; 

     selectSlide(currentSlideId); 
    } 

    function prevSlide() { 
     currentSlideId--; 
     if (currentSlideId < 0) currentSlideId = slidesAmount - 1; 

     selectSlide(currentSlideId); 
    } 

    jQuery(document).ready(function() { 
     slidesAmount = jQuery(".startpage-test").length; 

     jQuery(".show_previous").click(function() { 
      prevSlide(); 
      return false; 
     }); 

     jQuery(".show_next").click(function() { 
      nextSlide(); 
      return false; 
     }); 

     window.setInterval(function() { 
      nextSlide(); 
     }, 7000); 
    }); 

    jQuery("object.flashContent").each(function() { 
     swfobject.registerObject(jQuery(this).attr("id"), "9.0.0"); 
    }); 
</script>

的下一步 - /上一个按钮看起来是这样的：

 <div class="show_next"> 
        <a href="#"><span class="slide_nav"><img src="/elements/next.png" width="57" alt="Next"></span></a> 
       </div> 
      <div class="show_previous"> 
        <a href="#"><span class="slide_nav"><img src="/elements/prev.png" width="57" alt="Previous"></span></a> 
       </div>

在所有幻灯片当然还有一个链接，它也将是不错的停止放映盘旋此标签时的时间间隔。不幸的是，我不知道如何做到这一点。

来源

2011-05-20 eye-wonder

您可以将setInterval()的结果分配给一个变量，然后在需要时调用clearInterval()传递该变量。所以你的情况，更改此代码：

window.setInterval(function() { 
    nextSlide(); 
},

这样：

var interval = window.setInterval(function() { 
    nextSlide(); 
},

然后，在你使用任何.hover()，.mouseenter()，.click()或任何其他鼠标事件处理程序，只需拨打：

window.clearInterval(interval);

当然，您需要在需要重新启动时重新启动间隔！

来源

2011-05-20 11:34:31

重置幻灯片间隔JQuery

回答

相关问题