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"><</a> 160 <a href="javascript:" class="arrow" id="next">></a> 161 </div> 162 </body> 163 </html>
效果如图所示：
