褪色幻燈片Javascript

有大量的褪色幻燈片複製和粘貼..但我想了解它是如何工作的...所以我有這個工作在JavaScript中的幻燈片。我如何爲其添加淡入淡出效果？可以通過添加jquery fadeOut（）方法來完成嗎？在此先感謝！褪色幻燈片Javascript

var counter = 0; 

function slideShow() { 
var pics = [6]; 

pics[0] = "bilder/1.jpg"; 
pics[1] = "bilder/2.jpg"; 
pics[2] = "bilder/3.jpg"; 
pics[3] = "bilder/4.jpg"; 
pics[4] = "bilder/5.jpg"; 
pics[5] = "bilder/6.jpg"; 

document.getElementById('bildspelsrc').src = pics[counter]; 

counter++; 
if (counter % 6 == 0) counter = 0; 
} 

setInterval(slideShow,1000);

來源

2013-04-09 Half_Baked

var pics[] = {...//images in here} 
var idx = 0; 

function slide(){ 
idx++; 
if(idx == pics.length) 
    idx =0; 

$("#bildspelsrc").fadeOut(1000, function(){ 
    $("#bildspelsrc").attr("src", pics[idx]).fadeIn(1000); 
}); 
}

修訂
你需要一個觸發，試圖通過你的圖像陣列來調用這個在頁面加載

$(document).ready(function(){ 
     setInterval(slide,1000); 
});

這將循環和淡出他們先出來，然後褪色在新圖像中

UPDATE 2
的動畫只是

$('#bildspelsrc').animate({opacity: 0}, 'slow', function() { 
     $(this).attr({'src': pics[idx]}).animate({opacity: 1}); 
    });

來源

2013-04-09 21:31:04 Sherlock

會測試這個！ – 2013-04-09 21:33:46

試過了，但無法讓它工作.. – 2013-04-09 21:48:27

好吧，會給它一個新的嘗試..我想做的.animate而不是褪色......認爲它會看起來更順暢:) – 2013-04-09 21:55:54

更換褪色的部分不幸的是這不會與當前的方法工作。 $ .fadeOut（）淡化元素，在幻燈片中你實際上正在改變一個屬性。您無法將一張圖片淡入另一張圖片。正確的做法是讓所有幻燈片都有自己的DOM元素，並在這些元素之間淡化。互聯網上有很多這樣的例子。但是，如果你確實想要堅持自己正在做的事情，你可能會淡出元素，改變src，然後淡入元素。

$('#bildspelsrc').fadeOut(250, function() { $(this)[0].src = pics[counter]; }).fadeIn(250);

這裏是一個概念證明的鏈接：http://jsfiddle.net/dhQk/Y6Epm/

編輯爲您建立一個新版本的大多數其他滑塊如何啓動了一個開始。這是每張幻燈片放在內存中的地方。然後逐漸淡化它們。代碼很受評論，可以幫助你。

http://jsfiddle.net/dhQk/Y6Epm/4/

來源

2013-04-09 21:34:16

像魅力一樣工作，但它會與交叉淡入淡出。我想這是一個不同的故事... – 2013-04-09 21:49:22

我繼續並更新它爲你做一個交叉淡入淡出。請注意所需的CSS。 – 2013-04-10 07:45:50

褪色幻燈片Javascript

回答

相關問題