圖像幻燈片淡入淡出

Question

我有我的代碼爲圖像幻燈片，這是非常基本的。我想在所有圖像之間添加漸變過渡。我的代碼是

<script type="text/javascript"> 
var ultimateshow=new Array() 
ultimateshow[0]=['file:///Users/Luke/Documents/Aviramp/Images/Slideshow-1.jpg', '', ''] 
ultimateshow[1]=['file:///Users/Luke/Documents/Aviramp/Images/Slideshow-2.jpg', '', ''] 
ultimateshow[2]=['file:///Users/Luke/Documents/Aviramp/Images/Slideshow-3.jpg', '', ''] 
ultimateshow[3]=['file:///Users/Luke/Documents/Aviramp/Images/Slideshow-4.jpg', '', ''] 
ultimateshow[4]=['file:///Users/Luke/Documents/Aviramp/Images/Slideshow-5.jpg', '', ''] 
ultimateshow[5]=['file:///Users/Luke/Documents/Aviramp/Images/Slideshow.jpg', '', ''] 
var slidewidth="100%" 
var slideheight="400px" 
var slidecycles="continous" 
var randomorder="no" 
var preloadimages="yes" 
var slidebgcolor='white' 
var slidedelay=4500 
var ie=document.all 
var dom=document.getElementById 
var curcycle=0 

if (preloadimages=="yes"){ 
for (i=0;i<ultimateshow.length;i++){ 
var cacheimage=new Image() 
cacheimage.src=ultimateshow[i][0] 
} 
} 

var currentslide=0 

function randomize(targetarray){ 
ultimateshowCopy=new Array() 
var the_one 
var z=0 
while (z<targetarray.length){ 
the_one=Math.floor(Math.random()*targetarray.length) 
if (targetarray[the_one]!="_selected!"){ 
ultimateshowCopy[z]=targetarray[the_one] 
targetarray[the_one]="_selected!" 
z++ 
} 
} 
} 

if (randomorder=="yes") 
randomize(ultimateshow) 
else 
ultimateshowCopy=ultimateshow 

function rotateimages(){ 
curcycle=(currentslide==0)? curcycle+1 : curcycle 
ultcontainer='<center>' 
if (ultimateshowCopy[currentslide][1]!="") 
ultcontainer+='<a href="'+ultimateshowCopy[currentslide][1]+'"   target="'+ultimateshowCopy[currentslide][2]+'">' 
ultcontainer+='<img src="'+ultimateshowCopy[currentslide][0]+'" border="0">' 
if (ultimateshowCopy[currentslide][1]!="") 
ultcontainer+='</a>' 
ultcontainer+='</center>' 
if (ie||dom) 
crossrotateobj.innerHTML=ultcontainer 
if (currentslide==ultimateshow.length-1) currentslide=0 
else currentslide++ 
if (curcycle==parseInt(slidecycles) && currentslide==0) 
return 
setTimeout("rotateimages()",slidedelay) 
} 

if (ie||dom) 
document.write('<div id="slidedom"  style="width:'+slidewidth+';height:'+slideheight+'; background- color:'+slidebgcolor+'"></div>') 

function start_slider(){ 
crossrotateobj=dom? document.getElementById("slidedom") :  document.all.slidedom 
rotateimages() 
} 

if (ie||dom) 
window.onload=start_slider 

</script> 

我一直在試圖弄清楚這一點了一段時間，想知道是否有人能幫助我。

Answer 1

的衰落，你可以簡單地使用

transition:opacity 0.5s ease;

，你可以改變的0.5秒的任何時間你想 然後你使用JavaScript更改元素的不透明度爲0，其中你想