一个不糟糕的 Jquery 旋转器？

Question

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

所以基本上我问是否有人知道 Jquery 图像旋转器并不完全糟糕...哈哈

顺便说一句，这些是我想要它做的事情 会

1. 旋转图像
2. 自动淡入淡出
3. 有下一个和上一个按钮

谢谢

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

---

you can see this code with real images (and a some css adjustment) running在 jsFiddle：http://jsfiddle.net/SXcNy/。

Answer 2

Easy Slider，简单又棒极了！

http://cssglobe.com/post/5780/easy -slider-17-numeric-navigation-jquery-slider

和演示：

http ://cssglobe.com/lab/easyslider1.7/01.html
http://cssglobe.com/lab/easyslider1.7/02.html
http://cssglobe.com/lab/easyslider1.7/03.html

Answer 3

迄今为止我发现的最好的一个是 Zurb 团队的 Orbit。它最近被同化到他们的Foundation 框架中，但您仍然可以< a href="http://www.zurb.com/playground/orbit-jquery-image-slider" rel="nofollow">在此处下载独立插件

代码非常轻量级，放在一边由于提供直观的控制，它有一个与播放/暂停按钮集成的漂亮计时器。迄今为止，免费解决方案的最佳选择。

如果您想购买具有更多口哨/铃声和精美专业过渡效果的东西，您应该查看WOW Slider 或 TN3 画廊

Answer 4

为什么 jQuery 网站上的插件对您来说还不够。这有您需要的一切 http://plugins.jquery.com/plugin-tags/image- rotator

这里是演示： http://wowslider.com/jquery- slider-pinboard-fly-demo.html

Answer 5

尝试 jCarousel

http://sorgalla.com/jcarousel/

Answer 6

我和你有同样的问题，我想要一个简单的图像/内容幻灯片插件，但只能找到带有大量我不需要的功能和皮肤等的插件。所以我制作了 Basic jQuery Slider - 这样我就有了一个可以根据需要扩展的简单插件，而不是使用功能齐全并删除了我不需要的功能。如果您决定尝试一下并遇到任何问题，请告诉我，我会尽力提供帮助。