Question

我正在使用循环插件并且运行良好。但滑块保持滑动，我不知道应该使用什么选项来防止它自动播放。

$('#thumbs').cycle({
            fx: 'scrollHorz',
            prev: '.thumbPrev',
            next: '.thumbNext'
        });

我还检查了周期的选项参考http://jquery.malsup.com/cycle/options.html，但我没有找到任何有用的东西..

Answer 1

我找到了解决方案

$(elem).cycle({
    timeout: 0 //milliseconds between slide transitions (0 to disable auto advance)
});

超时是标准定义的4000

Answer 2

周期结束后：

$('#thumbs').cycle('pause')

或者按照jquery循环的作者，我原来答案的更简洁版本：

    $('#thumbs').cycle({
        fx: 'scrollHorz',
        prev: '.thumbPrev',
        next: '.thumbNext'
    }).cycle('pause');

参考：http://forum.jquery.com/topic/cycle-plugin-no-autostart-click-to-start-slideshow

Answer 3

将超时设置为零。这是一个例子：

<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/jquery.cycle.all.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#porta-slide-demo').cycle({ 
    fx:     'fade', 
    speed:  'fast', 
    timeout: 0, 
    next:   '#para', 
    prev:   '#prapa' 
});
});
</script>

<强> ..........

<div id="porta-slide-demo">
<img src="demo-images/01.jpg" width="450" height="300" />
<img src="demo-images/02.jpg" width="450" height="300" />
<img src="demo-images/03.jpg" width="450" height="300" />
</div>
    <div>
    <a id="prapa" href="#">Prapa</a>
    <a id="para" href="#">Para</a>
    </div>

如何防止循环插件自动播放？

3 个答案: