javascript实现简单幻灯片 javascript代码: <%--//多个DIV实现,无刷新--%> <mce:script type="text/javascript"><!-- var currentIndex=1; var selectColor="#ccffff"; var originColor="#99ffff"; var guideIcons=new Array(); var photos = new Array(); var timer; function init1() { photos[0] = document.getElementById("photo1"); photos[1] = document.getElementById("photo2"); photos[2] = document.getElementById("photo3"); photos[3] = document.getElementById("photo4"); photos[4] = document.getElementById("photo5"); guideIcons[0]=document.getElementById("index_1"); guideIcons[1]=document.getElementById("index_2"); guideIcons[2]=document.getElementById("index_3"); guideIcons[3]=document.getElementById("index_4"); guideIcons[4]=document.getElementById("index_5"); for(var i=0;i<photos.length;i++) { var index = i+1; if(currentIndex == index) { photos[i].style.display=""; guideIcons[i].style.backgroundColor=selectColor; guideIcons[i].style.height="17px"; guideIcons[i].style.width="17px"; } else { photos[i].style.display="none"; guideIcons[i].style.backgroundColor=originColor; guideIcons[i].style.height="15px"; guideIcons[i].style.width="15px"; } } currentIndex++; timer=setInterval("playPhoto()",3000); } function playPhoto() { if(currentIndex>5) currentIndex=1; for(var i=0;i<photos.length;i++) { var index = i+1; if(currentIndex == index) { photos[i].style.display=""; guideIcons[i].style.backgroundColor=selectColor; guideIcons[i].style.height="17px"; guideIcons[i].style.width="17px"; } else { photos[i].style.display="none"; guideIcons[i].style.backgroundColor=originColor; guideIcons[i].style.height="15px"; guideIcons[i].style.width="15px"; } } currentIndex++; } function select(i) { currentIndex=i; playPhoto(); } function over(obj) { obj.style.cursor="pointer"; } // window.οnlοad=init1; // --></mce:script> <%--//一个DIV实现,有刷新--%> <mce:script type="text/javascript"><!-- var currentIndex=1; var photo; var selectColor="#ccffff"; var originColor="#99ffff"; var guideIcons=new Array(); var timer; function getPhoto() { return photostr="<img alt='' src="images/"+currentIndex+".jpg" mce_src="images/"+currentIndex+".jpg" width='500px' height='290px' />"; } //播放图片 function playPhoto() { photo.innerHTML=getPhoto(); if(currentIndex>5) currentIndex=1; for(var i=0;i<guideIcons.length;i++) { var index = i+1; if(index == currentIndex) { guideIcons[i].style.backgroundColor=selectColor; guideIcons[i].style.height="17px"; guideIcons[i].style.width="17px"; } else { guideIcons[i].style.backgroundColor=originColor; guideIcons[i].style.height="15px"; guideIcons[i].style.width="15px"; } } currentIndex++; } function init() { photo=document.getElementById("photo"); guideIcons[0]=document.getElementById("index_1"); guideIcons[1]=document.getElementById("index_2"); guideIcons[2]=document.getElementById("index_3"); guideIcons[3]=document.getElementById("index_4"); guideIcons[4]=document.getElementById("index_5"); for(var i=0;i<guideIcons.length;i++) { var index = i+1; if(index == currentIndex) { guideIcons[i].style.backgroundColor=selectColor; guideIcons[i].style.height="17px"; guideIcons[i].style.width="17px"; } else { guideIcons[i].style.backgroundColor=originColor; guideIcons[i].style.height="15px"; guideIcons[i].style.width="15px"; } } currentIndex++; timer=setInterval("playPhoto()",3000); } window.οnlοad=init; // --></mce:script> html代码: <div style="width: 500px; height: 310px; text-align:center; background:#66ffff; vertical-align:middle;"> <%-- <div id="photo1" style="width: 500px; height: 280px; margin:auto 0;"> <img alt="" src="images/1.jpg" mce_src="images/1.jpg" width="500px" height="290px" /> </div> <div id="photo2" style="width: 500px; height: 280px; margin:auto 0;"> <img alt="" src="images/2.jpg" mce_src="images/2.jpg" width="500px" height="290px" /> </div> <div id="photo3" style="width: 500px; height: 280px; margin:auto 0;"> <img alt="" src="images/3.jpg" mce_src="images/3.jpg" width="500px" height="290px" /> </div> <div id="photo4" style="width: 500px; height: 280px; margin:auto 0;"> <img alt="" src="images/4.jpg" mce_src="images/4.jpg" width="500px" height="290px" /> </div> <div id="photo5" style="width: 500px; height: 280px; margin:auto 0;"> <img alt="" src="images/5.jpg" mce_src="images/5.jpg" width="500px" height="290px" /> </div>--%> <div id="photo" style="width: 500px; height: 280px; margin:auto 0;"> <img alt="" src="images/1.jpg" mce_src="images/1.jpg" width="500px" height="290px" /> </div> <div id="index_1" οnclick="select(1)" οnmοuseοver="over(this)" style="width:15px; height:15px;background-color:#99ffff; float:left; text-align:center; margin-left:415px; margin-top:13px;" >1</div> <div id="index_2" οnclick="select(2)" οnmοuseοver="over(this)" style="width:15px; height:15px;background-color:#99ffff; float:left; text-align:center; margin-left:1px; margin-top:13px;" >2</div> <div id="index_3" οnclick="select(3)" οnmοuseοver="over(this)" style="width:15px; height:15px;background-color:#99ffff; float:left; text-align:center; margin-left:1px; margin-top:13px;" >3</div> <div id="index_4" οnclick="select(4)" οnmοuseοver="over(this)" style="width:15px; height:15px;background-color:#99ffff; float:left; text-align:center; margin-left:1px; margin-top:13px;" >4</div> <div id="index_5" οnclick="select(5)" οnmοuseοver="over(this)" style="width:15px; height:15px;background-color:#99ffff; float:left; text-align:center; margin-left:1px; margin-top:13px;" >5</div> </div>