添加下一个＆amp;自定义图库的后退按钮

Question

我有这个javascript代码：

$(function(){
    $('.words-gallery div:gt(0)').hide();

    setInterval(function() {
        $('.words-gallery > div:first')    
        .fadeOut(1000)    
        .next()
        .delay(995)
        .fadeIn(1000)    
        .end()    
        .appendTo('.words-gallery');},  
    3000);

});

此代码将从DIVs创建一个图库，每个3000都会隐藏当前的DIV并显示下一个。{/ p>

我试图添加下一个＆amp;后退按钮，但它不能与我合作。

这是我的小提琴：

http://www.jsfiddle.net/jUrNx

知道该怎么做吗？

Answer 1

为什么不使用jQuery Cycle plugin？它会让你做你想要的一切，甚至更多。甚至还有一个特定的example using "next/prev"。

这是一个工作小提琴：http://jsfiddle.net/3Qz5T/

基本上，您可以按如下方式设置代码：

<强> HTML

<div class="nav"><a id="prev2" href="#">Prev</a> <a id="next2" href="#">Next</a></div>
<div class="words-gallery">
    <div>1</div>
    <div>22</div>
    <div>333</div>
</div>

<强> JS

$('.words-gallery').cycle({ 
    fx:     'fade', 
    speed:  'fast', 
    timeout: 3000, 
    next:   '#next2', 
    prev:   '#prev2' 
});