Question

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

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

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

自动旋转图像
褪色
有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();
    });
});

您可以使用真实图像（以及一些css调整）running at 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 framework ，但你仍然可以 download the standalone plugin here

代码非常轻巧，除了提供直观的控制外，还有一个与播放/暂停按钮集成的漂亮定时器。到目前为止，这是免费解决方案的最佳选择。

如果您希望为更多口哨/铃铛和花哨专业转换付费，您应该查看 WOW Slider 或 TN3 Gallery

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 - 所以我有一个简单的插件，我可以根据需要扩展，而不是使用一个功能齐全的插件，并删除我不需要的功能。如果您决定试一试并遇到任何问题，请告诉我，我会尽力帮助您。

一个不吸吮的Jquery旋转器？

6 个答案: