Jquery Image Cycler

Jquery Image Cycler

本文关键字：Cycler Image Jquery      更新时间：2023-09-26

我正在尝试用jQuery为我的网站制作一个图像循环器的东西，但我无法让它循环。我想添加三个按钮，这些按钮将在图片中循环，按钮 1 = 第一张图片，按钮 2 = 第二张图片，等等......并且如果按钮没有被单击，它每 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
});

}）;

您想要自定义的有什么特别的原因吗？有许多jQuery插件和库可用。我过去使用过简易滑块。它非常简单，不是很大，因此对性能几乎没有影响。

下面是使用 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);
                }
            });
        });

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

它

被称为循环，你可以在这里阅读更多关于它的信息：http://jquery.malsup.com/cycle/

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

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

相关文章：