一、轮播图无缝滚动
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>
运行效果: