自动轮播

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()">&lt;</button>
11         <button id="next" onclick="after()">&gt;</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 }

 

posted on 2016-06-06 21:13  熠良  阅读(100)  评论(0)  编辑  收藏  举报

导航