JavaScript实现轮播图

  1 <!DOCTYPE html>
  2 <html>
  3   <head>
  4     <meta charset="utf-8">
  5     <title>carousel</title>
  6     <style type="text/css">
  7       *{margin: 0;padding: 0;text-decoration: none;}
  8       body{padding: 20px;}
  9       #container{width: 384px;height: 216px;border: 3px solid #333;overflow: hidden;position: relative;}
 10       #list{width: 2688px;height: 216px;position: absolute;z-index: 1;}
 11       #list img{float: left;}
 12       #list img{width: 384px;height: 216px;}
 13       #buttons {position: absolute;height: 10px;width: 100px;z-index: 2;bottom: 20px;left: 140px;}
 14       #buttons span{cursor: pointer;float: left;border: 1px solid #fff;width: 10px;height: 10px;border-radius: 50%;background: #333;margin-right: 5px;}
 15       #buttons .on{background: orangered}
 16       .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: 90px;background-color: rgba(0, 0, 0, 0.3);color: #fff}
 17       .arrow:hover{background-color: rgba(0, 0, 0, 0.7);}
 18       #container:hover .arrow{display: block;}
 19       #prev{left: 20px;}
 20       #next{right: 20px;}
 21     </style>
 22     <script type="text/javascript">
 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 animated=false;
 30           var timer;
 31           //小圆点
 32           var index=1;
 33           function showButton() {
 34             //亮起当前图片对应的小圆点的同时关闭其他亮起的小圆点
 35             for (var i = 0; i < buttons.length; i++) {
 36               if (buttons[i].className == 'on') {
 37                     buttons[i].className = '';
 38                     break;
 39               }
 40             }
 41             buttons[index - 1].className = 'on';
 42           }
 43           function animate(offset) {
 44           animated=true;
 45           var newLeft=parseInt(list.style.left) + offset;
 46           //位移总时间
 47           var time=200;
 48           //位移时间间隔
 49           var interval=10;
 50           //每次位移量
 51           var speed=offset/(time/interval);
 52           function go(){
 53                 if((speed < 0 && parseInt(list.style.left) > newLeft ) || (speed >0 && parseInt(list.style.left) < newLeft)){
 54                   list.style.left=parseInt(list.style.left) + speed + 'px';
 55                   setTimeout(go,interval);
 56                 }else{
 57                   animated=false;
 58                   //animate=false;
 59                   //list.style.left=parseInt(list.style.left) + offset +"px" ;
 60                   list.style.left=newLeft + "px";
 61 
 62                   if (newLeft < -1920) {
 63                       list.style.left=-384 + "px";
 64                     }
 65                   if (newLeft > -384) {
 66                       list.style.left=-1920 + "px";
 67                     }
 68                 }
 69               }
 70                 go();
 71           }
 72           //自动播放功能
 73           function play(){
 74               timer=setInterval(function(){
 75                 next.onclick();
 76               },3000);
 77           }
 78           //清除定时器
 79           function stop(){
 80             clearInterval(timer);
 81           }
 82           //点击右箭头,left值减少384,实质是list(div框)左移384px
 83           next.onclick=function () {
 84             if (index == 5) {
 85               index = 1;
 86             }else{
 87               index += 1;
 88             }
 89 
 90             showButton();
 91             if(!animated){
 92                 animate(-384);
 93             }
 94 
 95           }
 96 
 97           //点击左箭头
 98           prev.onclick=function (){
 99             if (index == 1) {
100               index=5;
101             }else{
102                 index -= 1;
103             }
104 
105             showButton();
106             if(!animated){
107               animate(384);
108             }
109 
110           }
111           //给每个小圆点添加点击事件
112           for (var i = 0; i < buttons.length; i++) {
113             buttons[i].onclick=function(){
114               //判断一下当前点击的小圆点对应的图片是否是当前现实的图片，如果是就不进行图片切换
115               if (this.className == 'on') {
116                 return;
117               }
118               //获取当前点击小圆点的index值
119               //getAttribute可以获得DOM中的属性的值，也可以获得自定义属性的值
120               var myindex=parseInt(this.getAttribute('index'));
121               //计算偏移量
122               var offset = -384 * (myindex - index);
123               //显示指定的图片
124               if(!animated){
125                   animate(offset);
126               }
127 
128               //同时亮起对应的小圆点
129               index=myindex;
130               showButton();
131 
132             }
133           }
134           //鼠标移入自动播放停止，清除定时器
135           container.onmouseover=stop;
136           container.onmouseout=play;
137           play();
138         }
139     </script>
140   </head>
141   <body>
142     <div id="container">
143       <div id="list" style="left:-384px;">
144         <img src="images/5.jpg" alt="" />
145         <img src="images/1.jpg" alt="" />
146         <img src="images/2.jpg" alt="" />
147         <img src="images/3.jpg" alt="" />
148         <img src="images/4.jpg" alt="" />
149         <img src="images/5.jpg" alt="" />
150         <img src="images/1.jpg" alt="" />
151       </div>
152       <div id="buttons">
153       <span index="1" class="on"></span>
154       <span index="2"></span>
155       <span index="3"></span>
156       <span index="4"></span>
157       <span index="5"></span>
158     </div>
159     <a href="javascript:" class="arrow" id="prev">&lt;</a>
160     <a href="javascript:" class="arrow" id="next">&gt;</a>
161   </div>
162   </body>
163 </html>
效果如图所示：