HTML——JAVASCRIPT练习题——图片轮播
方法一：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <title>无标题文档</title> <style type="text/css"> #tu { width:400px; float:left; } #a,#b,#c,#d,#e,#f,#g { width:500px; height:350px; float:left; float:left; } </style> </head> <body> <div id="tu"> <img id="a" src="207.jpg" style="display:block"/> <img id="b" src="t01ba56e06b53e9d8ba.jpg" style="display:none"/> <img id="c" src="1.gif" style="display:none"/> <img id="d" src="3-1.jpg" style="display:none"/> <img id="e" src="TFMW20150411_Yale_0022_NEW_Rotator.jpg" style="display:none"/> <img id="f" src="t01ba56e06b53e9d8ba.jpg" style="display:none"/> <img id="g" src="TFMW20150411_Yale_0022_NEW_Rotator.jpg" style="display:none"/> </div> </body> <script type="text/javascript"> var jihe=new Array(); jihe[0]=document.getElementById("a"); jihe[1]=document.getElementById("b"); jihe[2]=document.getElementById("c"); jihe[3]=document.getElementById("d"); jihe[4]=document.getElementById("e"); jihe[5]=document.getElementById("f"); jihe[6]=document.getElementById("g"); var n=0; function change() { n++; if(n==0) { jihe[0].style.display="block"; jihe[1].style.display="none"; jihe[2].style.display="none"; jihe[3].style.display="none"; jihe[4].style.display="none"; jihe[5].style.display="none"; jihe[6].style.display="none"; } else if(n==1) { jihe[0].style.display="none"; jihe[1].style.display="block"; jihe[2].style.display="none"; jihe[3].style.display="none"; jihe[4].style.display="none"; jihe[5].style.display="none"; jihe[6].style.display="none"; } else if(n==2) { jihe[0].style.display="none"; jihe[1].style.display="none"; jihe[2].style.display="block"; jihe[3].style.display="none"; jihe[4].style.display="none"; jihe[5].style.display="none"; jihe[6].style.display="none"; } else if(n==3) { jihe[0].style.display="none"; jihe[1].style.display="none"; jihe[2].style.display="none"; jihe[3].style.display="block"; jihe[4].style.display="none"; jihe[5].style.display="none"; jihe[6].style.display="none"; } else if(n==4) { jihe[0].style.display="none"; jihe[1].style.display="none"; jihe[2].style.display="none"; jihe[3].style.display="none"; jihe[4].style.display="block"; jihe[5].style.display="none"; jihe[6].style.display="none"; } else if(n==5) { jihe[0].style.display="none"; jihe[1].style.display="none"; jihe[2].style.display="none"; jihe[3].style.display="none"; jihe[4].style.display="none"; jihe[5].style.display="block"; jihe[6].style.display="none"; } else if(n==6) { jihe[0].style.display="none"; jihe[1].style.display="none"; jihe[2].style.display="none"; jihe[3].style.display="none"; jihe[4].style.display="none"; jihe[5].style.display="none"; jihe[6].style.display="block"; } else { n=0; } window.setTimeout("change()",3000); } window.setTimeout("change()",3000); </script> </html>
方法二：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> #tu { width:400px; float:left; } #a,#b,#c,#d,#e,#f,#g { width:500px; height:350px; float:left; float:left; } </style> </head> <body> <div id="tu"> <img id="a" src="042815_Nano_468_605.jpg" style="display:block"/> <img id="b" src="RadArt1_922.jpg" style="display:none"/> <img id="c" src="zebrafish-522_0.jpg" style="display:none"/> <img id="d" src="Wheat-original_605.jpg" style="display:none"/> <img id="e" src="TFMW20150411_Yale_0022_NEW_Rotator.jpg" style="display:none"/> <img id="f" src="t01ba56e06b53e9d8ba.jpg" style="display:none"/> <img id="g" src="TFMW20150411_Yale_0022_NEW_Rotator.jpg" style="display:none"/> </div> </body> <script type="text/javascript"> var jihe=new Array(); jihe[0]=document.getElementById("a"); jihe[1]=document.getElementById("b"); jihe[2]=document.getElementById("c"); jihe[3]=document.getElementById("d"); jihe[4]=document.getElementById("e"); jihe[5]=document.getElementById("f"); jihe[6]=document.getElementById("g"); var n=0; function change() { n++; if(n==7) { n=0; } hideall(jihe); jihe[n].style.display="block"; window.setTimeout("change()",3000); } function hideall(a) { for(var i=0;i<7;i++) { a[i].style.display="none"; } } window.setTimeout("change()",3000); </script> </html>
方法三：老师版
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head> <body> <div id="d" style="background-image:url(3-1.jpg); height:200px; width:200px;"></div> </body> <script type="text/javascript"> var img=new Array(); img[0]="url(042815_Nano_468_605.jpg)"; img[1]="url(RadArt1_922.jpg)"; img[2]="url(zebrafish-522_0.jpg)"; img[3]="url(TFMW20150411_Yale_0022_NEW_Rotator.jpg)"; img[4]="url(t01ba56e06b53e9d8ba.jpg)"; var n=0; function change() { if(n==4) { n=0; } else { n++; } document.getElementById("d").style.backgroundImage=img[n]; window.setTimeout("change()",2000); } window.setTimeout("change()",2000); </script> </html>
