javascript - jQuery 图像循环器

Question

我正在尝试使用 jQuery 为我的网站制作一个图像循环器，但我无法让它循环播放。我想添加三个按钮来循环播放图片，button1 = 第一张图片，button2= 第二张图片，等等......如果没有点击按钮，让它每5秒左右自动循环一次，我该怎么做。我一直在寻找解决方案，但没有运气。帮助将不胜感激。我的代码是：

$(document).ready(function() {
var current = 1
if(current == 1){
    $('.imgslide1').fadeOut();
    $('.imgslide2').fadeOut();
    $('.imgslide3').fadeOut();
    $('.imgslide1').fadeIn().delay(3000).fadeOut().curr();
};
if(current == 2){
    $('.imgslide1').fadeOut();
    $('.imgslide2').fadeOut();
    $('.imgslide3').fadeOut();
    $('.imgslide2').fadeIn().delay(3000).fadeOut().curr();
};
if(current == 3){
    $('.imgslide1').fadeOut();
    $('.imgslide2').fadeOut();
    $('.imgslide3').fadeOut();
    $('.imgslide3').fadeIn().delay(3000).fadeOut().curr();
};
if(current > 3){
    current = 1;
};
function curr(){
    current++;
};
$('#button1').click(function() {
    current = 1
});
$('#button2').click(function() {
    current = 2
});
$('#button3').click(function() {
    current = 3
});

});

Answer 1

这是一个使用 Jquery 的示例，请查看 slidejs.com 以获得更全面的示例，其中包含您可以使用的代码。

<script src="js/slides.min.jquery.js"></script>
    <script>
        $(function(){
            $('#slides').slides({
                preload: true,
                preloadImage: 'img/loading.gif',
                play: 5000,
                pause: 2500,
                hoverPause: true,
                animationStart: function(current){
                    $('.caption').animate({
                        bottom:-35
                    },100);
                    if (window.console && console.log) {
                        // example return of current slide number
                        console.log('animationStart on slide: ', current);
                    };
                },
                animationComplete: function(current){
                    $('.caption').animate({
                        bottom:0
                    },200);
                    if (window.console && console.log) {
                        // example return of current slide number
                        console.log('animationComplete on slide: ', current);
                    };
                },
                slidesLoaded: function() {
                    $('.caption').animate({
                        bottom:0
                    },200);
                }
            });
        });

Answer 2

你有什么特别的理由想要一个定制的吗？有许多可用的 jQuery 插件和库。我过去使用过Easy Slider。它非常简单并且不是很大，因此对性能几乎没有影响。

Answer 3

我看到其他人发布了一些建议。我只想分享一个我在许多项目中使用过的非常棒的插件。

它叫做 Cycle，你可以在这里阅读更多关于它的信息：http: //jquery.malsup.com/cycle/

它支持导航（1、2、3）、下一个、上一个、自定义回调等等。查看一些非常简单的演示。

（我已经测试了许多循环插件，这是我遇到的最好的一个）。