javascript焦点图(根据图片下方的小框自动播放)

html和css就不详细说明了,也是简单布局,通过定位把跟随图片的小框,定位到图片下方

  1 <!DOCTYPE html>
  2 <html>
  3 
  4 <head>
  5     <meta charset="UTF-8">
  6     <title>Document</title>
  7     <style type="text/css">
  8         * {
  9             margin: 0;
 10             padding: 0;
 11             font-size: 12px;
 12         }
 13         
 14         .photo {
 15             width: 400px;
 16             height: 200px;
 17             margin: 50px;
 18             position: relative;
 19         }
 20         
 21         .main {
 22             width: 400px;
 23             height: 200px;
 24             position: relative;
 25         }
 26         
 27         .main1 li {
 28             width: 400px;
 29             height: 200px;
 30             list-style-type: none;
 31         }
 32         
 33         .pto {
 34             position: absolute;
 35             left: 0;
 36             top: 0;
 37         }
 38         
 39         .pto1 {
 40             width: 400px;
 41             height: 200px;
 42             background: red;
 43         }
 44         
 45         .pto2 {
 46             width: 400px;
 47             height: 200px;
 48             background: pink;
 49             display: none;
 50         }
 51         
 52         .pto3 {
 53             width: 400px;
 54             height: 200px;
 55             background: blue;
 56             display: none;
 57         }
 58         
 59         .btn {
 60             width: 30px;
 61             height: 30px;
 62             position: absolute;
 63         }
 64         
 65         .btn1 {
 66             left: 0;
 67             top: 85px;
 68             background: url("img/left.png");
 69         }
 70         
 71         .btn2 {
 72             right: 0;
 73             top: 85px;
 74             background: url("img/right.png");
 75         }
 76         
 77         .circleBtn {
 78             position: absolute;
 79             top: 170px;
 80             right: 182px;
 81             width: 42px;
 82             height: 10px;
 83             zoom: 1;
 84         }
 85         
 86         .circleBtn span {
 87             width: 10px;
 88             height: 10px;
 89             margin: 0 2px;
 90             float: left;
 91             cursor: pointer;
 92             background: url("img/cir.png");
 93         }
 94         
 95         .circleBtn .light {
 96             background: url("img/oncir.gif");
 97         }
 98     </style>
 99     <script type="text/javascript" src="jiaodiantujs.js">
100     </script>
101 
102 </head>
103 
104 <body>
105     <div class="photo" id="main">
106         <div class="main">
107             <ul class="main1" id="amain">
108                 <li class="pto pto1">one</li>
109                 <li class="pto pto2">two</li>
110                 <li class="pto pto3">three</li>
111             </ul>
112         </div>
113         <!--
114         <span class="btn btn1" id="btn1"></span>
115         <span class="btn btn2" id="btn2"></span>
116         -->
117         <div class="circleBtn" id="circleBtn">
118             <span class="light"></span>
119             <span></span>
120             <span></span>
121         </div>
122 
123     </div>
124 </body>
125 
126 </html>

下面是javacript部分

 1 function $(id) {
 2     return typeof id === "string" ? document.getElementById(id) : id;
 3 }
 4 window.onload = function() {
 5     //pto变量为所展示的图片集和
 6     var pto = $("amain").getElementsByTagName("li");
 7     //定义一个span标签的集合cirBtn
 8     var cirBtn = $("circleBtn").getElementsByTagName("span");
 9     //定义一个全局变量
10     var index = 0;
11     //定义一个setInterval方法cirTimer
12     var cirTimer = null;
13 
14     for (var i = 0; i < cirBtn.length; i++) {
15         //给图片加上id=0,1,2
16         cirBtn[i].id = i;
17         //鼠标移动邦定触发事件:显示当前id对应的图片
18         cirBtn[i].onmouseenter = function() {
19                 //先停止自动循环
20                 clearInterval(cirTimer);
21                 //隐藏图片和小框
22                 clearBtn();
23                 //显示当前id对应的图片和小框
24                 showBtn(this.id);
25             }
26             //鼠标离开触发事件:自动循环
27         cirBtn[i].onmouseout = function() {
28             cirTimer = setInterval(autoPlay, 2000);
29         }
30     }
31     //设置当前只有一个定时器cirTimer
32     if (cirTimer) {
33         clearInterval(cirTimer);
34         cirTimer = null;
35     }
36 
37     cirTimer = setInterval(autoPlay, 2000);
38 
39     //自动循环函数
40     function autoPlay() {
41         //当index小于2则++,否则就是超过长度,则归0即index=0
42         if (index < cirBtn.length - 1) {
43             index++;
44         } else {
45             index = 0;
46         }
47         //console.log(index);
48         //清除函数
49         clearBtn();
50         //显示函数
51         showBtn(index);
52     }
53 
54     //定义一个隐藏图片和小框的函数
55     function clearBtn() {
56         for (var i = 0; i < cirBtn.length; i++) {
57 
58             cirBtn[i].className = "";
59             pto[i].style.display = "none";
60         }
61     }
62     //定义一个显示当前id对应的图片和小框的函数
63     function showBtn(x) {
64         for (var i = 0; i < cirBtn.length; i++) {
65             console.log(x);
66             if (i == x) {
67                 cirBtn[i].className = "light";
68                 pto[i].style.display = "block";
69             }
70             //这里重要了.这里把x赋值给index是为了让循环从停止的id重新开始循环
71             index = x;
72         }
73     }
74 
75 }

 

posted @ 2016-10-27 14:49  rookieM  阅读(381)  评论(0)  编辑  收藏  举报