一、轮播图无缝滚动
1、获取元素，动态生成节点
2、匀速运动动画
3、调用动画函数
4、添加定时器，自动播放
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>无标题文档</title> 6 <style type="text/css"> 7 *{ padding:0; margin:0; list-style:none; border:0;} 8 .all{ 9 width:500px; 10 height:200px; 11 padding:7px; 12 border:1px solid #ccc; 13 margin:100px auto; 14 position:relative; 15 } 16 .screen{ 17 width:500px; 18 height:200px; 19 overflow:hidden; 20 position:relative; 21 } 22 23 .screen li{ width:500px; height:200px; overflow:hidden; float:left;} 24 .screen ul{ position:absolute; left:0; top:0px; width:3000px;} 25 .all ol{ position:absolute; right:10px; bottom:10px; line-height:20px; text-align:center;} 26 .all ol li{ float:left; width:20px; height:20px; background:#fff; border:1px solid #ccc; margin-left:10px; cursor:pointer;} 27 .all ol li.current{ background:yellow;} 28 29 </style> 30 <script type="text/javascript"> 31 function animate(obj,target){ 32 clearInterval(obj.timer); // 先清除定时器 33 var speed = obj.offsetLeft < target ? 15 : -15; // 用来判断 应该 + 还是 - 34 obj.timer = setInterval(function() { 35 var result = target - obj.offsetLeft; // 因为他们的差值不会超过5 36 obj.style.left = obj.offsetLeft + speed + "px"; 37 if(Math.abs(result)<=15) // 如果差值不小于 5 说明到位置了 38 { 39 clearInterval(obj.timer); 40 obj.style.left = target + "px"; // 有5像素差距 我们直接跳转目标位置 41 } 42 },10) 43 } 44 window.onload = function() { 45 // 获取元素 46 var box = document.getElementById("all"); // 大盒子 47 var ul = document.getElementById("ul"); 48 var ulLis = ul.children; 49 50 // 操作元素 51 52 // 因为我们要做无缝滚动 ，所以要克隆第一张，放到最后一张后面去 53 // a.appendchild(b) 把 b 放到 a 的最后面 54 // 1. 克隆完毕 55 ul.appendChild(ul.children[0].cloneNode(true)); 56 57 // 2. 创建 ol 和 小 li 58 console.log(ulLis.length); 59 var ol = document.createElement("ol"); // 生成的是ol 60 box.appendChild(ol); // 把ol 追加到 box 里面 61 for(var i=0;i<ulLis.length-1;i++) 62 { 63 var li = document.createElement("li"); 64 li.innerHTML = i + 1; // 给里面小的li 文字 1 2 3 4 5 65 ol.appendChild(li); // 添加到 ol 里面 66 } 67 ol.children[0].className = "current"; 68 69 //3. 开始动画部分 70 var olLis = ol.children; 71 for(var i=0; i<olLis.length;i++) 72 { 73 olLis[i].index = i; // 获得当前第几个小li 的索引号 74 olLis[i].onmouseover = function() { 75 for(var j=0;j<olLis.length;j++) 76 { 77 olLis[j].className = ""; // 所有的都要清空 78 } 79 this.className = "current"; 80 animate(ul,-this.index*500); 81 // 调用动画函数 第一个参数 谁动画 第二个 走多少 82 square = key = this.index; // 当前的索引号为主 83 } 84 } 85 // 4. 添加定时器 86 var timer = null; // 轮播图的定时器 87 var key = 0; //控制播放张数 88 var square = 0; // 控制小方块 89 timer = setInterval(autoplay,1000); // 开始轮播图定时器 90 function autoplay() { 91 key++; // 先 ++ 92 if(key>ulLis.length - 1) // 后判断 93 { 94 ul.style.left = 0; // 迅速调回 95 key = 1; // 因为第6张就是第一张 第6张播放 下次播放第2张 96 } 97 animate(ul,-key*500); // 再执行 98 // 小方块 99 square++; 100 if(square > olLis.length -1) 101 { 102 square = 0; 103 } 104 for(var i=0;i<olLis.length;i++) // 先清除所有的 105 { 106 olLis[i].className = ""; 107 } 108 olLis[square].className = "current"; // 留下当前的 109 } 110 //last最后 鼠标经过大盒子要停止定时器 111 box.onmouseover = function() { 112 clearInterval(timer); 113 } 114 box.onmouseout = function() { 115 timer = setInterval(autoplay,1000); // 开始轮播图定时器 116 } 117 } 118 </script> 119 120 </head> 121 122 <body> 123 <div class="all" id='all'> 124 <div class="screen"> 125 <ul id="ul"> 126 <li><img src="images/taobao/1.jpg" width="500" height="200" /></li> 127 <li><img src="images/taobao/2.jpg" width="500" height="200" /></li> 128 <li><img src="images/taobao/3.jpg" width="500" height="200" /></li> 129 <li><img src="images/taobao/4.jpg" width="500" height="200" /></li> 130 <li><img src="images/taobao/5.jpg" width="500" height="200" /></li> 131 </ul> 132 </div> 133 134 </div> 135 </body> 136 </html>
运行效果：
