0

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

这是我的小提琴：http: //jsfiddle.net/Be67B/

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

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

4

6 回答 6

3

不要使用循环，只需要求浏览器重复调用您的动画步骤：

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);
于 2012-07-20T15:51:47.760 回答
2

看到这个 jquery 循环插件：

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

可能这就是你想要的

于 2012-07-20T15:50:49.630 回答
1

您可以创建一个执行转换的函数，该函数具有一个回调函数作为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);
        });
    });    
}
    ​
于 2012-07-20T15:53:12.613 回答
0

我会使用插件。但是你可以用手来做。我只是建议不要更改图像的 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/

于 2012-07-20T16:02:02.807 回答
0

又快又脏：jsFiddle 示例

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'));​
于 2012-07-20T16:02:53.207 回答
0

我刚刚做了这个代码：

$(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();
});

提琴手：http: //jsfiddle.net/Be67B/

于 2012-07-20T15:58:50.913 回答