JS之轮播图自动切换效果 

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>焦点轮播图</title>
  6     <style type="text/css">
  7         *{ margin: 0; padding: 0; text-decoration: none;}
  8         body { padding: 20px;}
  9         #container { width: 600px; height: 400px; border: 3px solid #333; overflow: hidden; position: relative;}
 10         #list { width: 4200px; height: 400px; position: absolute; z-index: 1;}
 11         #list img { float: left;}
 12         #buttons { position: absolute; height: 10px; width: 100px; z-index: 2; bottom: 20px; left: 250px;}
 13         #buttons span { cursor: pointer; float: left; border: 1px solid #fff; width: 10px; height: 10px; border-radius: 50%; background: #333; margin-right: 5px;}
 14         #buttons .on {  background: orangered;}
 15         .arrow { cursor: pointer; display: none; line-height: 39px; text-align: center; font-size: 36px; font-weight: bold; width: 40px; height: 40px;  position: absolute; z-index: 2; top: 180px; background-color: RGBA(0,0,0,.3); color: #fff;}
 16         .arrow:hover { background-color: RGBA(0,0,0,.7);}
 17         #container:hover .arrow { display: block;}
 18         #prev { left: 20px;}
 19         #next { right: 20px;}
 20     </style>
 21     <script type="text/javascript">
 22 
 23         window.onload = function () {
 24             var container = document.getElementById('container');
 25             var list = document.getElementById('list');
 26             var buttons = document.getElementById('buttons').getElementsByTagName('span');
 27             var prev = document.getElementById('prev');
 28             var next = document.getElementById('next');
 29             var index = 1;
 30             var len = 5;
 31             var animated = false;  //动画运行状态函数，初始状态为false
 32             var interval = 3000;
 33             var timer;  //声明定时器
 34 
 35 
 36             function animate (offset) {  //offset为总偏移量
 37                 if (offset == 0) {
 38                     return;
 39                 }
 40                 animated = true;  //动画运行时候，状态为true
 41                 var time = 300; //位移总时间
 42                 var inteval = 10;  //每隔10毫秒移动
 43                 var speed = offset/(time/inteval);  //每次位移量
 44                 var left = parseInt(list.style.left) + offset;  //offset为总偏移量
 45 
 46                 var go = function (){
 47                     if ( (speed > 0 && parseInt(list.style.left) < left) || (speed < 0 && parseInt(list.style.left) > left)) {
 48                         list.style.left = parseInt(list.style.left) + speed + 'px';
 49                         setTimeout(go, inteval);
 50                     }
 51                     else {
 52                         list.style.left = left + 'px';
 53                         if(left>-200){
 54                             list.style.left = -600 * len + 'px';
 55                         }
 56                         if(left<(-600 * len)) {
 57                             list.style.left = '-600px';
 58                         }
 59                         animated = false;  //不做位移时候，动画执行完毕
 60                     }
 61                 }
 62                 go();
 63             }
 64 
 65             function showButton() {//激活小圆点
 66                 for (var i = 0; i < buttons.length ; i++) {
 67                     if( buttons[i].className == 'on'){
 68                      //清除其他的class
 69                         buttons[i].className = '';
 70                         break; //跳出循环
 71                     }
 72                 }
 73                 buttons[index - 1].className = 'on'; //当前Li加class
 74             }
 75 
 76             function play() {   //切换函数
 77                 timer = setInterval(function () {  //设置定时器
 78                     next.onclick();
 79                    
 80                 }, interval); //interval本例子是3000毫秒
 81             }
 82             function stop() {
 83                 clearInterval(timer);  //清楚定时器
 84             }
 85 
 86             next.onclick = function () {
 87                 if (animated) {
 88                     return;
 89                 }
 90                 if (index == 5) {
 91                     index = 1; //到最右边（例子图片总数为5），跳到1
 92                 }
 93                 else {
 94                     index += 1;//到最右边，跳到1
 95                 }
 96                 animate(-600);
 97                 showButton(); //调用小圆点函数
 98             }
 99             prev.onclick = function () {
100                 if (animated) {
101                     return;
102                 }
103                 if (index == 1) {
104                     index = 5;
105                 }
106                 else {
107                     index -= 1;
108                 }
109                 animate(600);
110                 showButton(); //调用小圆点函数
111             }
112 
113             for (var i = 0; i < buttons.length; i++) {
114                 buttons[i].onclick = function () { //给每个小圆点加click事件
115                     if (animated) {
116                         return;
117                     }
118                     if(this.className == 'on') {  //当前class为on，则返回函数，后面不执行了
119                         return;
120                     }
121                     var myIndex = parseInt(this.getAttribute('index'));//index为自定义属性，用getAttribute获取到,然后转换为整数
122                     var offset = -600 * (myIndex - index); //新偏移值-旧偏移值，算出每次点击小圆点的偏移量
123 
124                     animate(offset);  //传值进去
125                     index = myIndex;  //更新目前的index值
126                     showButton();  //调用小圆点函数
127                 }
128             }
129 
130             container.onmouseover = stop;  
131             container.onmouseout = play;  //鼠标移除，就执行定时器
132 
133             play();//默认状态是自动播放
134 
135         }
136     </script>
137 </head>
138 <body>
139 
140 <div id="container">
141     <div id="list" style="left: -600px;">
142         <img src="5.jpg" alt="1"/>
143         <img src="1.jpg" alt="1"/>
144         <img src="2.jpg" alt="2"/>
145         <img src="3.jpg" alt="3"/>
146         <img src="4.jpg" alt="4"/>
147         <img src="5.jpg" alt="5"/>
148         <img src="1.jpg" alt="5"/>
149     </div>
150     <div id="buttons">
151         <span index="1" class="on"></span>
152         <span index="2"></span>
153         <span index="3"></span>
154         <span index="4"></span>
155         <span index="5"></span>
156     </div>
157     <a href="javascript:;" id="prev" class="arrow">&lt;</a>
158     <a href="javascript:;" id="next" class="arrow">&gt;</a>
159 </div>
160 
161 </body>
162 </html>

 

posted @ 2017-06-30 21:34  riyyao92  阅读(1695)  评论(0)    收藏  举报