2

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

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

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

  1. 自动旋转图像
  2. 褪色
  3. 有下一个和上一个按钮

谢谢

4

6 回答 6

8

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

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：http://jsfiddle.net/SXcNy/ 上看到带有真实图像（和一些 css 调整）的代码。

于 2011-02-21T06:01:50.717 回答
1

迄今为止我发现的最好的一个是来自Zurb工作人员的Orbit。它最近被同化到他们的Foundation 框架中，但您仍然可以在此处下载独立插件

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

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

于 2012-02-29T22:32:52.677 回答
0

Try jCarousel

http://sorgalla.com/jcarousel/

于 2011-02-21T06:13:21.587 回答
0

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

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

于 2011-02-21T05:41:19.857 回答
0

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

于 2012-03-01T06:15:39.730 回答