一个不吸吮的Jquery旋转器？

Question

我一直在寻找一个简单的jquery旋转器,它有下一个/上一个按钮,它会自动淡出5个左右的图像...到目前为止,一切都过于复杂,根本不是我想要的或者它如此简单它除了在图像之间切换之外没有任何功能......

所以基本上我问是否有人知道Jquery图像旋转器不完全吮吸...大声笑

顺便说一句,这些是我希望它做的事情

1. 自动旋转图像
2. 褪色
3. 有next和prev按钮

谢谢

Answer 1

建立你自己的.这是一个相当简单的脚本.
这样的事情可能会让你开始:

HTML:

<div class="rotator">
  <img src="img1.jpg" />
  <img src="img2.jpg" />
  <img src="img3.jpg" />
</div>
<a id="rotator-prev" href="#">Previous</a> 
<a id="rotator-next" href="#">Next</a>

JavaScript的:

$(document).ready(function() {
    var allImgs = $('.rotator img');

    allImgs.css({
        position: 'absolute',
        top: 0,
        left: 0
    }).hide();

    var currIdx = 0;
    allImgs.first().show();

    function next() {
        var nextIdx = currIdx + 1;
        if (nextIdx >= allImgs.length) nextIdx = 0;
        allImgs.eq(currIdx).fadeOut();
        allImgs.eq(nextIdx).fadeIn();
        currIdx = nextIdx;
    }

    function prev() {
        var prevIdx = currIdx - 1;
        if (prevIdx < 0) prevIdx = allImgs.length - 1;
        allImgs.eq(currIdx).fadeOut();
        allImgs.eq(prevIdx).fadeIn();
        currIdx = prevIdx;
    }

    function doAuto() {
        next();
        setTimeout(doAuto, 5000);
    }
    setTimeout(doAuto, 5000);

    $('#rotator-prev').click(function(evt) {
        evt.preventDefault();
        prev();
    });
    $('#rotator-next').click(function(evt) {
        evt.preventDefault();
        next();
    });
});

你可以看到这个代码与jsFiddle运行的真实图像(以及一些css调整):http://jsfiddle.net/SXcNy/.