图像幻灯片的淡入淡出
Image slideshow fading in and out
我有一个图像幻灯片的代码,这是非常基本的。我想在我所有的图像之间添加一个渐变过渡。我的代码是
<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>
我已经想了一段时间了,想知道是否有人能帮我。
对于衰落,您可以简单地使用
transition:opacity 0.5s ease;
你可以随时更改0.5秒然后使用javascript将元素的不透明度更改为0,您需要
相关文章:
- Javascript将图像src更改为淡入淡出
- css(或jQuery)悬停时淡入淡出
- 将淡入淡出添加到“我的身体背景滑块”
- 多重潜水淡入淡出打开
- 添加/删除类淡入淡出不起作用
- 带有计数器、缩略图、进度条和淡入淡出效果的简单jQuery幻灯片
- 使用jquery淡入淡出
- 淡入淡出脚本不起作用
- 具有淡入淡出效果的全背景图像
- 纯 JavaScript 淡入淡出 - 淡入不起作用
- 帧淡出/淡入
- 如何在onClick事件中使用ReactJS淡出/淡入内容
- 淡出 ->淡入无法正常工作
- JQuery 淡出/淡入以创建排序列表
- 无法让元素淡出/淡入
- 正在添加'淡出/淡入'响应媒体查询
- jQuery:具有淡入和淡出(淡入)的图像
- Div won't淡出/淡入
- 淡出/淡入和上卷jquery效果
- 如何根据 SELECT 更改淡出/淡入视图