javascript图片切换效果/带文字

纯图片版:

 

<html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>Slideshow</title> <mce:script type="text/javascript" charset="utf-8"><!-- var galleryarray = ['dog.gif','cat.gif','penguin.gif']; var curimg=0; function rotateimages(){ document.getElementById("slideshow").setAttribute("src","img/"+galleryarray[curimg]) //document.getElementById("slideshow").src="img/"+galleryarray[curimg] curimg=(curimg<galleryarray.length-1)?curimg+1:0 } window.onload=function(){ setInterval("rotateimages()",2500) } // --></mce:script> </head> <body> <div style="width:170px;height:160px;border:4px solid #e2e2e2;margin:0 auto;"> <img id="slideshow" src="img/cat.gif" mce_src="img/cat.gif"> </div> </div> </body> </html>

 

 

图片+文字说明

 

 

<html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>Slideshow</title> <mce:script type="text/javascript" charset="utf-8"><!-- var galleryarray = ['dog.gif|dog','cat.gif|cat','penguin.gif|penguin']; var curimg=0; function rotateimages(){ document.getElementById("slideshow").setAttribute("src","img/"+galleryarray[curimg].split("|")[0]) document.getElementById("showTxt").innerHTML=galleryarray[curimg].split("|")[1]; //document.getElementById("slideshow").src="img/"+galleryarray[curimg] curimg=(curimg<galleryarray.length-1)?curimg+1:0 } window.onload=function(){ setInterval("rotateimages()",2500) } // --></mce:script> </head> <body> <div style="margin:0 auto;width:200px;"> <div style="width:170px;height:160px;border:4px solid #e2e2e2;"> <img id="slideshow" src="img/cat.gif" mce_src="img/cat.gif" src="img/cat.gif" mce_src="img/cat.gif"> </div> <span>This is </span><span style="padding:8px;" mce_style="padding:8px;" id="showTxt">cat</span> </div> </body> </html>

你可能感兴趣的:(JavaScript,html,function,div)