一、輪播圖無縫滾動
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>
運作效果：
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)