Jquery Image Cycler

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插件和库可用。我过去使用过Easy Slider。它非常简单，不是很大，所以对性能几乎没有影响。

Answer 2

下面是一个使用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 3

我看到其他人发布了一些建议。我只想分享我在众多项目中使用过的绝对精彩的插件。

这就是所谓的周期，你可以在这里阅读更多关于它：http://jquery.malsup.com/cycle/

它支持导航（1，2，3），下一个，上，定制的回调和多很多。看看一些非常简单的演示。

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