javascript - 我怎样才能让这个 jQuery slider 自动

标签 javascript jquery slider

我将完全诚实地告诉你,我从某个地方下载了这个 slider ,我对 Javascript 的了解非常少。

我试图让 slider 每 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 毫秒)它将单击下一个按钮并滑动。您必须编写一些内容才能将 slider 重置回开始位置。如果您想在悬停时暂停幻灯片:

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

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

关于javascript - 我怎样才能让这个 jQuery slider 自动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18666741/

相关文章:

iphone - 如何更改 slider 缩略图?

jQuery slider 不会立即停止

javascript - 从 Javascript 中的 HTTP Post 请求返回图像

javascript - React Apollo - 如何在单个 pollInterval 中进行多个查询

JavaScript/jQuery JSON 数组问题 - 值未定义

javascript - 从 JSON 对象动态创建嵌套列表

javascript - 为什么Javascript代码在底部工作而不是在顶部工作?

javascript - 如何在 javascript 中检查 cookie 是否为空?

javascript - jquery 函数 - 多个输入/1 个函数

jquery - 想要放大我的 Jquery slider 中央图片