1

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

});
4

2 回答 2

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

于 2013-09-06T21:32:44.283 回答
0

您可以在 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');
});
于 2013-09-06T21:26:29.173 回答