添加下一个 &自定义图库的后退按钮

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);
    
});

此代码将从 DIV 中创建一个画廊，每个 3000 将隐藏当前的 DIV 并显示下一个。

我试图添加下一个&后退按钮，但它对我不起作用。

这是我的小提琴：

http://www.jsfiddle.net/jUrNx

知道如何做？

Answer 1

为什么不使用 jQuery Cycle 插件？它可以让您完成您所要求的一切甚至更多。甚至还有一个使用“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' 
});