Question

我正在使用JQuery Simple Carousel，它正在做一切正常（自动播放，每个列表项，prev和下一个按钮之间的淡入淡出）......但问题是当我点击一个按钮时它会停止自动播放。我想找到一个解决方案，一旦点击，旋转木马再次启动的时间是自动播放一次所需的时间的两倍。这是代码

<script type="text/javascript">
    jQuery(document).ready(function() {
        // Carousel 
        $("ul.writein").simplecarousel({
            width:692,
            height:148,
            auto: 5000,
            fade: 700,
            next: $('.next'),
            prev: $('.prev')
        });
    });

</script>

Answer 1

问题在于以下代码部分：

if(typeof click != "undefined")
config.auto = false;

在您使用任何导航后，它会有效地停止旋转木马。要解决这个问题，你需要：

编辑添加动画超时重置：

添加将存储超时的变量以及超时是否有效：

var myTimer, timerActive = false;

在var li = ul.children('li');

之后

取代：

if(typeof click != "undefined")
            config.auto = false;

        if(config.auto!=false)
            setTimeout(function() {
                slide('next');
            }, config.auto);

使用：

if(typeof click != "undefined"){
    if(config.auto!=false){
        if (timerActive) clearTimeout(myTimer);
        myTimer = setTimeout(function() {
                slide('next');
            }, config.auto * 2);
        }
        timerActive = true;
    }
    else{
        if(config.auto!=false){
            if (timerActive) clearTimeout(myTimer);
            myTimer = setTimeout(function() {
                slide('next');
            }, config.auto);
            timerActive = true;
        }
    }

并在轮播代码的最后替换：

if(config.auto!=false)
        setTimeout(function() {
            slide('next');
        }, config.auto);

使用：

if(config.auto!=false){
            if (timerActive) clearTimeout(myTimer);
            myTimer = setTimeout(function() {
                slide('next');
            }, config.auto);
            timerActive = true;
        }

----结束编辑----

请注意，我实际上没有测试任何此类内容 - 可能存在拼写错误等。如果它不起作用你可以总是尝试旋转木马jQuery我写了https://github.com/c2h5oh/jQuery-Cycle-Uber-Lite

JQuery轮播简历问题

1 个答案: