Question

我想在我的函数中创建一个循环，以便幻灯片效果始终重新开始。

图像1转到图像2一切都很好，但是我想让它淡化回图像1，然后转到图像2，依此类推......总是这样循环。

我需要在代码中添加什么才能使其正常工作？

Answer 1

不要使用循环，只要让浏览器重复调用动画步骤：

setInterval(function(){
   // your animation (in fact just a step)
}, someDelay);

示范：http://jsfiddle.net/dystroy/nPh6S/

在这个精确的情况下，动画完成：

setInterval(function(){
    $("#top").fadeOut(function() {
        $(this).attr("src","http://1.bp.blogspot.com/-cFt5KNrHsHc/TZMH6XUBu-I/AAAAAAAAAR4/R6hOP7lffx0/s1600/apple-logo.png").fadeIn().delay(1000).fadeOut(function(){
            $(this).attr('src', 'http://coreldrawtips.com/images/applebig.jpg').fadeIn().delay(1000);
        });
     }
    );
}, 4000);

Answer 2

看到这个jquery循环插件：

http://jquery.malsup.com/cycle/

可能这就是你想要的

Answer 3

你可以创建一个执行转换的函数，它有一个回调函数作为fadeIn方法的一部分，它将回调自身以触发下一个转换，它只是在一个恒定的循环中。

这是你修改过的jsfiddle： http://jsfiddle.net/Be67B/1/

<强> HTML：

<img id="top" src="http://coreldrawtips.com/images/applebig.jpg" width="300" height="300" />

<强>使用Javascript：

$(document).ready(function(){
  transition(false);
});

function transition(first)
{
    var src = first ? "http://coreldrawtips.com/images/applebig.jpg" : "http://1.bp.blogspot.com/-cFt5KNrHsHc/TZMH6XUBu-I/AAAAAAAAAR4/R6hOP7lffx0/s1600/apple-logo.png";

    $("#top").delay(1000).fadeOut(function() {
        $(this).attr("src",src).fadeIn(function() {
            transition(!first);
        });
    });    
}

Answer 4

我刚刚制作了这段代码：

$(document).ready(function(){
   // images in the pool
   var images=["http://1.bp.blogspot.com/-cFt5KNrHsHc/TZMH6XUBu-     I/AAAAAAAAAR4/R6hOP7lffx0/s1600/apple-logo.png",
           "http://1.bp.blogspot.com/-cFt5KNrHsHc/TZMH6XUBu-I/AAAAAAAAAR4/R6hOP7lffx0/s1600/apple-logo.png"];

      // next image to display
      var next = 0;

      // interval beetween images
      var INTERVAL = 1000;

      // main function
      var doCarrousel = function() {
         $("#top").fadeOut(function() {
             $(this).attr("src", images[next]).fadeIn(
                 function() {
                   setTimeout(doCarrousel, INTERVAL);
                 });
          });
          if (++next >= images.length)
             next = 0;
       };

       //start carrousel
       doCarrousel();
});

fiddler ：http://jsfiddle.net/Be67B/

Answer 5

我会使用插件。但你可以手工完成。我只是建议不要更改图像的src，因为有些浏览器不能很好地处理它，比如safari没有触发加载事件。

相反，将所有图像放在容器中，并循环其可见性：

$(document).ready(function(){
    var currentImage = $("#images img:first");

    setInterval(function(){
        currentImage.fadeOut();

        if(currentImage.next().size())
            currentImage = currentImage.next();
        else
            currentImage = currentImage.siblings().first();

        currentImage.fadeIn();
    }, 1000)
});

请参阅小提琴：http://jsfiddle.net/Be67B/2/

Answer 6

快速而肮脏： jsFiddle example

function swap(img) {
    img = (img == 'http://coreldrawtips.com/images/applebig.jpg') ? 'http://1.bp.blogspot.com/-cFt5KNrHsHc/TZMH6XUBu-I/AAAAAAAAAR4/R6hOP7lffx0/s1600/apple-logo.png' : 'http://coreldrawtips.com/images/applebig.jpg';
    $('#top').delay(2000).fadeOut(function() {
        $(this).attr('src', img)
    }).fadeIn(function() {
        setTimeout(function() {
            swap(img)
        }, 1000);
    });
};
swap($('#top').attr('src'));

jQuery淡入淡出图像循环

6 个答案: