javascript焦点图自动播放

这次是完整版，网页点开就能自动播放

  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         .pto4 {
 60             width: 400px;
 61             height: 200px;
 62             background: #f2ee36;
 63             display: none;
 64         }
 65         
 66         .btn {
 67             width: 30px;
 68             height: 30px;
 69             position: absolute;
 70         }
 71         
 72         .btn1 {
 73             left: 0;
 74             top: 85px;
 75             background: url("img/left.png");
 76         }
 77         
 78         .btn2 {
 79             right: 0;
 80             top: 85px;
 81             background: url("img/right.png");
 82         }
 83         
 84         .circleBtn {
 85             position: absolute;
 86             top: 170px;
 87             right: 172px;
 88             width: 56px;
 89             height: 10px;
 90             zoom: 1;
 91         }
 92         
 93         .circleBtn span {
 94             width: 10px;
 95             height: 10px;
 96             margin: 0 2px;
 97             float: left;
 98             cursor: pointer;
 99             background: url("img/cir.png");
100         }
101         
102         .circleBtn .light {
103             background: url("img/oncir.gif");
104         }
105     </style>
106 
107 
108 </head>
109 
110 <body>
111     <div class="photo" id="main">
112         <div class="main">
113             <ul class="main1" id="amain">
114                 <li class="pto pto1">one</li>
115                 <li class="pto pto2">two</li>
116                 <li class="pto pto3">three</li>
117                 <li class="pto pto4">four</li>
118             </ul>
119         </div>
120 
121         <span class="btn btn1" id="btn1"></span>
122         <span class="btn btn2" id="btn2"></span>
123 
124         <div class="circleBtn" id="circleBtn">
125             <span class="light"></span>
126             <span></span>
127             <span></span>
128             <span></span>
129         </div>
130 
131     </div>
132 
133 </body>
134 
135 </html>

下面的是js代码，函数的定义都有注释，不明白的可以看前面的单个焦点图的随笔，图片是img文件夹下

  1 <script>
  2         function $(id) {
  3             return typeof id === "string" ? document.getElementById(id) : id;
  4         }
  5 
  6 
  7         var btnleft = $("btn1");
  8         var btnright = $("btn2");
  9 
 10         //1.先做按钮特效
 11         //定义自定义函数用于按钮
 12         function onBtn(one, two) {
 13             one.style.background = two;
 14         }
 15         //当鼠标移动至左边按钮调用onBtn函数
 16         btnleft.onmouseenter = function() {
 17                 onBtn(this, "url(img/onleft.gif) no-repeat");
 18             }
 19             //同理
 20         btnleft.onmouseleave = function() {
 21                 onBtn(this, "url(img/left.png) no-repeat");
 22             }
 23             //当鼠标移动至右边按钮调用onBtn函数
 24         btnright.onmouseenter = function() {
 25                 onBtn(this, "url(img/onright.gif) no-repeat");
 26             }
 27             //同理
 28         btnright.onmouseleave = function() {
 29             onBtn(this, "url(img/right.png) no-repeat");
 30         }
 31 
 32         //2.设置图片，小框同时移动
 33         //定义变量
 34         var pto = $("amain").getElementsByTagName("li");
 35         var cirBtn = $("circleBtn").getElementsByTagName("span");
 36         var index = 0;
 37         var timer = null;
 38         var div = $("main");
 39 
 40         //设置定时器timer
 41         //timer = setInterval(autoPlayRight, 2000);
 42 
 43         //设置自动函数
 44         function autoPlayRight() {
 45             if (index < pto.length - 1) {
 46                 index++;
 47             } else {
 48                 index = 0;
 49             }
 50             //调用清除图片函数
 51             clearPto();
 52             //调用显示图片函数，代入参数index
 53             showPto(index);
 54             //调用清除小框函数
 55             clearBtn();
 56             //调用显示小框函数，代入参数index
 57             showBtn(index);
 58 
 59         }
 60 
 61         //定义清除图片的函数
 62         function clearPto() {
 63             for (var i = 0; i < pto.length; i++) {
 64                 pto[i].style.display = "none";
 65             }
 66         }
 67 
 68         //定义显示图片的函数
 69         function showPto(x) {
 70             for (var i = 0; i < pto.length; i++) {
 71                 if (i == x) {
 72                     pto[i].style.display = "block";
 73                 }
 74             }
 75         }
 76 
 77         //定义清除小框的函数
 78         function clearBtn() {
 79             for (var i = 0; i < cirBtn.length; i++) {
 80                 cirBtn[i].className = "";
 81             }
 82         }
 83 
 84         //定义显示小框的函数
 85         function showBtn(y) {
 86             for (var i = 0; i < cirBtn.length; i++) {
 87                 if (i == y) {
 88                     cirBtn[i].className = "light";
 89                 }
 90                 //这里重要了，如果不把返回值赋值给index，鼠标离开小框，
 91                 //自动循环会执行上一次的循环，而不是本次鼠标离开时，显示下一张图片
 92                 index = y;
 93             }
 94         }
 95 
 96         //3.设置鼠标点击事件
 97         btnright.onclick = autoPlayRight;
 98         btnleft.onclick = btnLeft;
 99 
100         function btnLeft() {
101             if (index == 0) {
102                 index = pto.length - 1;
103             } else {
104                 index--;
105             }
106             //调用清除图片函数
107             clearPto();
108             //调用显示图片函数，代入参数index
109             showPto(index);
110             //调用清除小框函数
111             clearBtn();
112             //调用显示小框函数，代入参数index
113             showBtn(index);
114         }
115 
116         //4.设置鼠标移动至焦点图上时候停止自动播放
117         //把定时器放入自定义函数方便调用
118         function start() {
119             timer = setInterval(autoPlayRight, 2000);
120         }
121 
122         //把清除定时器放入自定义函数便于调用
123         function stop() {
124             clearInterval(timer);
125         }
126         //鼠标进入焦点图则停止自动播放
127         div.onmouseenter = stop;
128         //鼠标离开则开始自动
129         div.onmouseleave = start;
130         //设置当前只有一个定时器
131         if (timer) {
132             clearInterval(timer);
133             timer = null;
134         }
135         //设置网页点开时就自动播放
136         start();
137 
138 
139         //5.设置图片随小框变化
140         for (var i = 0; i < cirBtn.length; i++) {
141             cirBtn[i].id = i;
142             cirBtn[i].onmouseenter = function() {
143                 clearInterval(timer);
144                 //调用清除图片函数
145                 clearPto();
146                 //调用显示图片函数，代入参数index
147                 showPto(this.id);
148                 //调用清除小框函数
149                 clearBtn();
150                 //调用显示小框函数，代入参数index
151                 showBtn(this.id);
152             }
153             
154         }
　　　　　　　</script>

 

 

posted @ 2016-11-01 11:00  rookieM  阅读(1112)  评论(0)  编辑  收藏  举报