html：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>轮播</title> 5 <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> 6 <link rel="stylesheet" href="css/circleplay.css"> 7 </head> 8 <body> 9 <div id="zone" onmouseover="stop()" onmouseout="goon()" > 10 <button id="pre" onclick="before()"><</button> 11 <button id="next" onclick="after()">></button> 12 <img id="pic" alt="测试" src="" > 13 <ul id="picpoint"> 14 15 </ul> 16 </div> 17 <script type="text/javascript" src="js/circleplay.js"></script> 18 </body> 19 </html>
css:
1 /*设置图片所在div*/ 2 #zone{ 3 width: 350px; 4 height: 300px; 5 position: absolute; 6 } 7 /*设置图片标签*/ 8 #zone img{ 9 width: 300px; 10 height: 250px; 11 cursor: pointer; 12 } 13 /*设置按钮标签*/ 14 #zone button{ 15 width: 20px; 16 height: 20px; 17 position: absolute; 18 float: left; 19 top: 120px; 20 z-index: 3; 21 display: none; 22 cursor: pointer; 23 } 24 #zone #next{ 25 left:280px ; 26 } 27 /*图片导航圆点*/ 28 #zone #picpoint{ 29 top: 250px; 30 31 } 32 #zone li{ 33 background-color: rgb(0,0,0); 34 display: inline-block; 35 width: 10px; 36 height: 10px; 37 border-radius: 100px; 38 margin-left: 10px; 39 cursor: pointer; 40 41 }
js:
1 /** 2 * Created by Administrator on 16-6-6. 3 */ 4 var imgs=new Array(); 5 imgs[0]="imgs/1.jpg" 6 imgs[1]="imgs/2.jpg" 7 imgs[2]="imgs/3.jpg" 8 imgs[3]="imgs/4.jpg" 9 imgs[4]="imgs/5.jpg" 10 var img=document.getElementById("pic") 11 var bef=document.getElementById("pre") 12 var aft=document.getElementById("next") 13 var point=document.getElementById("zone") 14 15 var index=0; 16 var v; 17 window.onload=function(){ 18 img.setAttribute("src",imgs[index]) 19 play(); 20 pointer() 21 22 } 23 function play(){ 24 v=window.setInterval("circleplay()",1000); 25 26 } 27 function circleplay(){ 28 img.setAttribute("src",imgs[index+1]) 29 index++; 30 if(index==4){ 31 index=0; 32 } 33 } 34 function stop(){ 35 clearInterval(v); 36 bef.style.display="block"; 37 aft.style.display="block"; 38 } 39 function goon(){ 40 v=window.setInterval("circleplay()",2000); 41 bef.style.display="none"; 42 aft.style.display="none"; 43 } 44 function before(){ 45 if(index==0){ 46 img.setAttribute("src",imgs[imgs.length-1]) 47 index=imgs.length-1; 48 }else{ 49 img.setAttribute("src",imgs[index-1]) 50 index-- 51 } 52 53 } 54 function after(){ 55 if(index==(imgs.length-1)){ 56 img.setAttribute("src",imgs[0]) 57 index=0 58 }else{ 59 img.setAttribute("src",imgs[index+1]) 60 index++ 61 } 62 } 63 var num=new Array(); 64 var newLi; 65 function pointer(){ 66 67 for(var i=0;i<imgs.length;i++){ 68 num[i]=i; 69 newLi=document.createElement("li") 70 newLi.setAttribute("value",i) 71 point.appendChild(newLi) 72 newLi.setAttribute("onmousemove","findPic()") 73 74 } 75 }