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/

它支持nav（1,2,3），next，previous，custom回调等等。看看一些非常简单的演示。

（我测试了很多循环插件，这是我遇到的最好的插件）。

Jquery Image Cycler

3 个答案: