如何通過使用jquery淡入淡出來隨機顯示圖像？

Question

這是HTML代碼。

<div id="Slogan"> 
<h1> 
<img src="img1.gif" /> 
<img src="img2.gif" /> 
<img src="img3.gif" /> 
<img src="img4.gif" /> 
<img src="img5.gif" /> 
</h1> 
</div> 

#slogan {float:left;position:relative;width:100%;} 

我想隨機顯示所有圖像，但像幻燈片放映一樣，具有淡入淡出效果。如何處理jQuery？

我需要最輕鬆的方法。

Answer 1

所以這是一個非常酷的插件，它可以（也可能不會，這取決於如何照亮你想要它），你想要什麼，它叫Nivo Slider，它有不同的轉換的負載，但on my website我選擇使用淡入淡出淡出，這是非常定製

http://nivo.dev7studios.com/

Answer 2

您是否嘗試過使用jQuery Cycle plugin？

Answer 3

// Define a random integer function 
function random(n){ 
    return Math.floor(Math.random() * n); 
} 

// Define some variables, hide all images and show just one of them. 
var transition_time = 500; 
var waiting_time = 500; 
var images = $('div#Slogan img'); 
var n = images.length; 
var current = random(n); 
images.hide(); 
images.eq(current).show(); 

// Periodically, we fadeOut the current image and fadeIn a random one 
var interval_id = setInterval(function(){ 
    images.eq(current).fadeOut(transition_time, function(){ 
     current = random(n); 
     images.eq(current).fadeIn(transition_time); 
    }); 
}, 2 * transition_time + waiting_time); 

// You can then stop the effect with: 
// clearInterval(interval_id);