如何使此jQuery滑块自动运行

How can I make this jQuery slider automatic

本文关键字：运行 何使此 jQuery      更新时间：2023-09-26

我将完全诚实地告诉你，我从某个地方的下载中得到了这个滑块，我对Javascript的了解非常少。

我正在尝试让滑块每 4 或 5 秒自动转到下一个图像或内容片段，并且我想让它在鼠标悬停在内容上时停止。

这是我的代码

    $(document).ready(function(){ 
    if(jQuery("#slider").length){
        var totalImages = jQuery("#slider > li").length, 
            imageWidth = jQuery("#slider > li:first").outerWidth(true),
            totalWidth = imageWidth * totalImages,
            visibleImages = Math.round(jQuery("#slider-wrap").width() / imageWidth),
            visibleWidth = visibleImages * imageWidth,
            stopPosition = (visibleWidth - totalWidth);
        jQuery("#slider").width(totalWidth);
        jQuery("#gallery-prev").click(function(){
            if(jQuery("#slider").position().left < 0 && !jQuery("#slider").is(":animated")){
                jQuery("#slider").animate({left : "+=" + imageWidth + "px"});
            }
            return false;
        });
        jQuery("#gallery-next").click(function(){
            if(jQuery("#slider").position().left > stopPosition && !jQuery("#slider").is(":animated")){
                jQuery("#slider").animate({left : "-=" + imageWidth + "px"});
            }
            return false;
        });
    }
});

你不远了，基本上你只需要在计时器中重用你的下一次点击功能，如下所示：

// Autoslide
timer = window.setInterval("autoSlide()", 1000);
function autoSlide(){ jQuery("#gallery-next").click(); }

因此，每 1 秒（1000 毫秒）它将单击下一步按钮并滑动。您必须编写一些内容才能将滑块重置回开头。如果您想在悬停时暂停幻灯片：

jQuery('#slider').hover(function(){
   window.clearInterval(timer);
}, function(){
   timer = window.setInterval("autoSlide()", 1000);
});

您也许可以将计时器存储在 var 中并再次调用 var，我只是复制了一些我的代码，所以如果有人想纠正我，请这样做！

你可以在document.ready函数中放这样的东西：

var autoNext = setInterval(
    function() {
        jQuery("#gallery-next").click();
    },
    4000
);
jQuery("#id-of-the-content-that-stops-auto-scroll").mouseover(function() {
    clearInterval(autoNext);
    jQuery(this).unbind('mouseover');
});
相关文章：