1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" 6 content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>简单轮播图</title> 9 <style> 10 *{ 11 margin: 0; 12 padding: 0; 13 } 14 /*//易错点：进行动画的ul必须进行绝对定位才能够进行动画移动；*/ 15 ul{ 16 position: absolute; 17 left: 0; 18 top: 0; 19 } 20 li{ 21 float: left; 22 list-style: none; 23 } 24 .all{ 25 width: 500px; 26 height: 200px; 27 margin: 100px auto; 28 overflow: hidden; 29 position: relative; 30 } 31 .all ul{ 32 width: 3000px; 33 height: 200px; 34 35 } 36 img{ 37 vertical-align:top; 38 } 39 ol{ 40 width: 130px; 41 position: absolute; 42 bottom: 10px; 43 right: 10px; 44 } 45 ol li{ 46 width: 15px; 47 height: 15px; 48 background: #fff; 49 color:#000; 50 float: left; 51 margin-left: 10px; 52 text-align: center; 53 line-height: 15px; 54 } 55 li.current{ 56 background: yellow; 57 } 58 </style> 59 </head> 60 <body> 61 <!--利用克隆的方法--> 62 <!--img{w500;h200}--> 63 <div class="all" id="all"> 64 <div class="screen"> 65 <ul id="ul"> 66 <li><img src="images/taobao/1.jpg" alt=""></li> 67 <li><img src="images/taobao/2.jpg" alt=""></li> 68 <li><img src="images/taobao/3.jpg" alt=""></li> 69 <li><img src="images/taobao/4.jpg" alt=""></li> 70 <li><img src="images/taobao/5.jpg" alt=""></li> 71 </ul> 72 </div> 73 </div> 74 </body> 75 </html> 76 <script> 77 function animate(obj,target){ 78 clearInterval(obj.timer); // 先清除定时器 79 var speed = obj.offsetLeft < target ? 15 : -15; // 用来判断向左走还是向右走； 80 obj.timer = setInterval(function() { 81 var result = target - obj.offsetLeft; // 因为最终他们的差值不会超过15； 82 obj.style.left = obj.offsetLeft + speed + "px"; 83 if(Math.abs(result)<=15) // 如果差值不小于15 说明到位置了 84 { 85 clearInterval(obj.timer); 86 obj.style.left = target + "px"; // 如，95-100之间有5像素差距； 我们直接跳转目标位置 87 } 88 },10) 89 } 90 window.onload=function() { 91 function $(id) { 92 return document.getElementById(id) 93 }; 94 var box = $('all'); 95 var ul = $('ul'); 96 var ulLis = ul.children; 97 // 克隆第一张li,并添加给ul 98 ul.appendChild(ul.children[0].cloneNode(true)); 99 // 创建ol和li; 100 var ol = document.createElement('ol'); 101 box.appendChild(ol); 102 for (var i = 0; i < ulLis.length - 1; i++) { 103 var li = document.createElement('li'); 104 li.innerHTML = i + 1; 105 ol.appendChild(li); 106 } 107 ol.children[0].className = 'current'; 108 var olLis = ol.children; 109 for (var i = 0; i < olLis.length; i++) { 110 olLis[i].index = i; 111 olLis[i].onmouseover = function () { 112 for (j = 0; j < olLis.length; j++) { 113 olLis[j].className = ''; 114 } 115 this.className = 'current'; 116 animate(ul, -this.index * 500); 117 } 118 } 119 // 添加定时器 120 var timer=null; 121 var key=0; 122 var square=0; 123 timer=setInterval(autoplay,1000); 124 function autoplay() { 125 key++; 126 if(key>ulLis.length-1){ 127 ul.style.left=0; 128 key=1; 129 } 130 animate(ul,-key*500); 131 square++; 132 if(square>olLis.length-1){ 133 square=0; 134 } 135 for(var i=0;i<olLis.length;i++){ 136 olLis[i].className=''; 137 } 138 olLis[square].className='current'; 139 } 140 box.onmouseover=function(){ 141 clearInterval(timer); 142 }; 143 box.onmouseout=function (ev) { 144 timer=setInterval(autoplay,1000); 145 } 146 } 147 </script>