jQuery淡入淡出圖像循環

我想在我的函數中創建一個循環，以便幻燈片放映效果總是重新啓動。jQuery淡入淡出圖像循環

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

這一切都很好的圖像1到圖像2，但我想它褪色回的圖像1，然後去圖像2，依此類推。 ..總是這樣循環。

我需要在我的代碼中添加什麼來完成這項工作？

來源

2012-07-20 larin555

看到這個jQuery插件週期：

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

可能這是你想要

來源

2012-07-20 15:50:49

真是一個偉大的插件...很簡單！謝謝。它做我所需要的，但幾乎沒有代碼行。 – larin555 2012-07-20 16:03:11

@ user1388136 - 爲什麼在幾行代碼中完成此操作時加載整個插件？ – j08691 2012-07-20 16:03:57

@ j08691這是一個標準和維護的插件，並且可以完成更多的任務 – 2012-07-20 16:06:30

什麼，否則不要使用一個循環，只是要求瀏覽器反覆打電話給你的動畫步：

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-20 15:51:47

它的作品，但它總是褪色到相同的圖像...？我需要它回到我更新的第一張圖像 – larin555 2012-07-20 15:54:36

（http://jsfiddle.net/dystroy/nPh6S/）。我認爲這更符合你的需求？您仍然需要調整確切的預期效果。 – 2012-07-20 15:59:11

您可以創建一個具有過渡，其中有一個回調函數作爲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-20 15:53:12

我剛纔提出這個代碼：

$(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-20 15:58:50 devundef

我會用一個插件。但是你可以親手做。我只是建議不要更改圖像的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-20 16:02:02 Andre

快速和骯髒的：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'));

來源

2012-07-20 16:02:53 j08691

jQuery淡入淡出圖像循環

回答

相關問題