Question

我将非常诚实地告诉你我从某个地方下载了这个滑块，我对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;
        });
    }

});

Answer 1

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

// 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，我只是复制了我的一些代码，所以如果有人想要纠正我，请做！

Answer 2

你可以把这样的东西放在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');
});

如何自动生成这个jQuery滑块

2 个答案: