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(){
 24var container=document.getElementById(‘container‘);
 25var list=document.getElementById("list");
 26var buttons=document.getElementById(‘buttons‘).getElementsByTagName("span");
 27var prev=document.getElementById("prev");
 28var next=document.getElementById(‘next‘);
 29var animated=false;
 30var timer;
 31//小圆点 32var index=1;
 33function showButton() {
 34//亮起当前图片对应的小圆点的同时关闭其他亮起的小圆点 35for (var i =0; i < buttons.length; i++) {
 36if (buttons[i].className ==‘on‘) {
 37                    buttons[i].className =‘‘;
 38break;
 39              }
 40            }
 41            buttons[index -1].className =‘on‘;
 42          }
 43function animate(offset) {
 44          animated=true;
 45var newLeft=parseInt(list.style.left) + offset;
 46//位移总时间 47var time=200;
 48//位移时间间隔 49var interval=10;
 50//每次位移量 51var speed=offset/(time/interval);
 52function go(){
 53if((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 62if (newLeft <-1920) {
 63                      list.style.left=-384+"px";
 64                    }
 65if (newLeft >-384) {
 66                      list.style.left=-1920+"px";
 67                    }
 68                }
 69              }
 70                go();
 71          }
 72//自动播放功能 73function play(){
 74              timer=setInterval(function(){
 75                next.onclick();
 76              },3000);
 77          }
 78//清除定时器 79function stop(){
 80            clearInterval(timer);
 81          }
 82//点击右箭头,left值减少384,实质是list(div框)左移384px 83          next.onclick=function () {
 84if (index ==5) {
 85              index =1;
 86            }else{
 87              index +=1;
 88            }
 89 90            showButton();
 91if(!animated){
 92                animate(-384);
 93            }
 94 95          }
 96 97//点击左箭头 98          prev.onclick=function (){
 99if (index ==1) {
100              index=5;
101            }else{
102                index -=1;
103            }
104105            showButton();
106if(!animated){
107              animate(384);
108            }
109110          }
111//给每个小圆点添加点击事件112for (var i =0; i < buttons.length; i++) {
113            buttons[i].onclick=function(){
114//判断一下当前点击的小圆点对应的图片是否是当前现实的图片，如果是就不进行图片切换115if (this.className ==‘on‘) {
116return;
117              }
118//获取当前点击小圆点的index值119//getAttribute可以获得DOM中的属性的值，也可以获得自定义属性的值120var myindex=parseInt(this.getAttribute(‘index‘));
121//计算偏移量122var offset =-384* (myindex - index);
123//显示指定的图片124if(!animated){
125                  animate(offset);
126              }
127128//同时亮起对应的小圆点129              index=myindex;
130              showButton();
131132            }
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>