今天学到轮播图以前看似很简单，今天一做对于我这新手还是挺难，主要还是逻辑思维。
现在就对自己做的轮播图在整体的一步一步的写一下：
HTML+css代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.a1 {
width: 500px;
height: 200px;
border: 1px solid red;
margin: 0 auto;
position: relative;
overflow: hidden;
}
li {
float: left;
display: inline-block;
}
.a2 {
position: relative;
width: 500px;
height: 200px;
}
ul {
position: absolute;
top: 0;
left: 0;
width: 3000px;
margin: 0;
padding: 0;
list-style: none;
}
img {
display: inline;
width: 500px;
height: 200px;
}
.a3 {
height: 50px;
position: absolute;
display: block;
width: 500px;
top: 75px;
display: none;
cursor: pointer;
color: white;
}
.a3 #left {
text-align: center;
position: absolute;
left: 0;
background-color: blue;
font-size: 50px;
opacity:0.3;
}
.a3 #right {
text-align: center;
position: absolute;
margin-left: 460px;
background-color: blue;
font-size: 50px;
opacity:0.3;
}
ol li {
width: 20px;
text-align: center;
margin-left: 5px;
background-color: white;
color: black;
cursor: pointer;
}
ol {
position: absolute;
top: 180px;
}
.a5 {
background-color: yellow;
}
</style>
</head>
<body>
<div id="a1" class="a1">
<div id="a2" class="a2">
<ul>
<li><img src="img/轮播图1.jpg" /></li>
<li><img src="img/轮播图2.jpg" /></li>
<li><img src="img/轮播图3.jpg" /></li>
</ul>
<ol>
</ol>
</div>
<div class="a3">
<span id="left"><</span>
<span id="right">></span>
</div>
</div>
</body>
</html>解决兼容性js代码如下：
1 <script src="js/common.js">
2 //获取ID
3 function dgb(id) {
4 return document.getElementById(id);
5 }
6
7 // 解决firstElementChild的兼容性问题,获取第一个子元素
8 function getfirstElementChild(parent) {
9 if(parent.firstElementChild) {
10 return parent.firstElementChild;
11 }
12 var node, nodes = parent.childNodes,
13 i = 0;
14 while(node = nodes[i++]) {
15 if(node.nodeType === 1) {
16 return node
17 }
18 }
19 return null;
20 }
21
22 //解决innertext兼容性问题 给 "element"元素 设置 "cotent"内容
23 function setInnerText(element, cotent) {
24 if(typeof element.innerText === 'string') {
25 element.innerText = cotent;
26 } else {
27 element.textContent = cotent;
28 }
29 }
30
31 //动态创建表格
32 function createTable(parent, headData, bodyData) {
33 var table = createHead(parent, headData);
34 createBody(table,bodyData);
35 }
36
37 //表头
38 function createHead(parent, headData) {
39 //表头
40 var table = document.createElement('table');
41 parent.appendChild(table);
42 table.border = '1px';
43 table.width = '500px';
44 table.cellSpacing = '0';
45
46 var thead = document.createElement('thead');
47 table.appendChild(thead);
48
49 var tr = document.createElement('tr');
50 thead.appendChild(tr);
51 tr.style.height = '50px';
52 tr.style.backgroundColor = 'lightgray';
53 //生成表头中的列
54 headData.forEach(function(item) {
55 var th = document.createElement('th');
56 tr.appendChild(th);
57 setInnerText(th, item);
58 });
59 return table;
60 }
61
62 //数据行
63 function createBody(table,bodyData) {
64 var tbody = document.createElement('tbody');
65 table.appendChild(tbody);
66 tbody.style.textAlign = 'center'; //居中显示
67
68 bodyData.forEach(function(item) {
69 //创建行
70 tr = document.createElement('tr');
71 tbody.appendChild(tr);
72
73 //创建列
74 //遍历对象
75 for(var key in item) {
76 //inem[key]
77 var td = document.createElement('td');
78 tr.appendChild(td);
79 setInnerText(td, item[key]);
80 }
81 //操作列
82 td = document.createElement('td');
83 tr.appendChild(td);
84 //创建删除的超链接
85 var link = document.createElement('a');
86 link.href = 'javascript:void(0)';
87 td.appendChild(link);
88 setInnerText(link, '删除');
89 //注册时间
90 link.onclick = linkClick;
91 });
92
93 function linkClick() {
94 //提示
95 var r = confirm('是否删除');
96 //移除元素
97 if(r) {
98 var tr = this.parentNode.parentNode;
99 tbody.removeChild(tr);
100 }
101 }
102 }
103 //动画js
104 function dong(element,target,callback) {
105 var step = 10;
106 if (element.c) {
107 clearInterval(element.c);
108 }
109 element.c = setInterval(function() {
110
111 var b = element.offsetLeft;
112 if (b > target) {
113 step = - Math.abs(step);
114 }
115 if(Math.abs(b - target) <= Math.abs(step)) {
116 element.style.left = target + 'px';//防止超出500px
117 clearInterval(element.c);
118 if (callback) {
119 callback();
120 }
121
122 return;//返回结束，不继续往下执行
123 }
124 b += step;
125 element.style.left = b + 'px';
126 }, 5)
127 }
128 </script>轮播图js代码如下：
1 <script type="text/javascript">
2 var c = 2000;
3 var box = dgb('a1');
4 var mbox = dgb('a2');
5 var ul = mbox.children[0];
6 var ol = mbox.children[1];
7
8 //获取箭头里的元素
9 var jiantou = box.children[1];
10 var left = dgb('left');
11 var right = dgb('right');
12 //获取图片宽度
13 var imgWidth = mbox.offsetWidth;
14 //动态生成序号
15 //01获取图片的个数
16 var imgShu = ul.children.length;
17
18 for(i = 0; i < imgShu; i++) {
19 //02创建序号
20 var li = document.createElement('li');
21 ol.appendChild(li);
22 setInnerText(li, i + 1)
23 //记录自己的索引
24 li.index = i;
25 //给序号li注册点击事件
26 li.onclick = fun;
27 if(i === 0) {
28 li.className = 'a5';
29 }
30 }
31
32 function fun() {
33 //让图片动起来
34 dong(ul, -this.index * imgWidth);
35 //高亮
36 for(i = 0; i < imgShu; i++) {
37 li = ol.children[i];
38 li.className = '';
39 }
40 this.className = 'a5';
41 //让第一张默认选中
42 index = this.index;
43 }
44 //箭头的出现和后退前进
45
46 box.onmouseenter = function() {
47 jiantou.style.display = 'block';
48 clearInterval(s);
49 }
50 box.onmouseleave = function() {
51 jiantou.style.display = 'none';
52 s = setInterval(function(){
53 right.click();
54 },c);
55 }
56 //点击右键头下一张
57 var index = 0;
58 right.onclick = function(){
59 //等下一次点击时，索引等于最后一张时，
60 //让索引等于0并令ul的坐标等于第一张，
61 //再动画形式到第二张
62 //也就是复制图点击下一张时，
63 //先瞬间到第一张在以动画的形式到第二张
64 if (index === imgShu) {
65 index = 0;
66 ul.style.left = 0 + 'px'
67 }
68
69 index++;
70 if(index < imgShu){
71 ol.children[index].click();
72 }else{
73 //移动画的方式一到最后一张
74 dong(ul,-index * imgWidth);
75 for(i = 0; i < imgShu; i++) {
76 li = ol.children[i];
77 li.className = '';
78 }
79 //选中第一个序号
80 ol.children[0].className = 'a5';
81 }
82 }
83 //点击左箭头上一张
84 left.onclick = function(){
85 if(index === 0){
86 index = imgShu;
87 ul.style.left = -index * imgWidth + 'px'
88 }
89 index--;
90 if(index >= 0){
91 ol.children[index].click();
92 }
93 }
94
95 //4无缝滚动
96 //4.1复制第一个li的图片
97 var cloneLi = ul.children[0].cloneNode(true);
98 ul.appendChild(cloneLi);
99 //自动
100 var s = setInterval(function(){
101 right.click();
102 },c)
103 </script>第一步：
先获取所有元素
第二步：
一. 动态生成序号
0获取图片宽度
1获取图片的个数
2创建序号
3给序号li注册点击事件
3.1记录自己的索引
4让图片动起来
5让点中的高亮
6让第一张默认选中
1 var imgWidth = mbox.offsetWidth;
2 //动态生成序号
3 //01获取图片的个数
4 var imgShu = ul.children.length;
5 for(i = 0; i < imgShu; i++) {
6 //02创建序号
7 var li = document.createElement('li');
8 ol.appendChild(li);
9 setInnerText(li, i + 1)
10 //记录自己的索引
11 li.index = i;
12 //给序号li注册点击事件
13 li.onclick = fun;
14 if(i === 0) {
15 li.className = 'a5';
16 }
17 }
18
19 function fun() {
20 //让图片动起来
21 dong(ul, -this.index * imgWidth);
22 //高亮
23 for(i = 0; i < imgShu; i++) {
24 li = ol.children[i];
25 li.className = '';
26 }
27 this.className = 'a5';
28 //让第一张默认选中
29 index = this.index;
30 }
二. 箭头的出现和后退前进
1鼠标进入事件
2鼠标移出事件
3点击右键头下一张
3.1 复制第一个li的图片
3.2 等下一次点击时，索引等于最后一张时，让索引等于0并令ul的坐标等于第一张，再动画形式到第二张，也就是复制图点击下一张时，先瞬间到第一张在以动画的形式到第二张，选中第一个序号
4点击左箭头上一张
4.1如上相反
1 //箭头的出现和后退前进
2
3 box.onmouseenter = function() {
4 jiantou.style.display = 'block';
5 clearInterval(s);
6 }
7 box.onmouseleave = function() {
8 jiantou.style.display = 'none';
9 s = setInterval(function(){
10 right.click();
11 },c);
12 }
13 //点击右键头下一张
14 var index = 0;
15 right.onclick = function(){
16 //等下一次点击时，索引等于最后一张时，
17 //让索引等于0并令ul的坐标等于第一张，
18 //再动画形式到第二张
19 //也就是复制图点击下一张时，
20 //先瞬间到第一张在以动画的形式到第二张
21 if (index === imgShu) {
22 index = 0;
23 ul.style.left = 0 + 'px'
24 }
25
26 index++;
27 if(index < imgShu){
28 ol.children[index].click();
29 }else{
30 //移动画的方式一到最后一张
31 dong(ul,-index * imgWidth);
32 for(i = 0; i < imgShu; i++) {
33 li = ol.children[i];
34 li.className = '';
35 }
36 //选中第一个序号
37 ol.children[0].className = 'a5';
38 }
39 }
40 //点击左箭头上一张
41 left.onclick = function(){
42 if(index === 0){
43 index = imgShu;
44 ul.style.left = -index * imgWidth + 'px'
45 }
46 index--;
47 if(index >= 0){
48 ol.children[index].click();
49 }
50 }
51
52 //4无缝滚动
53 //4.1复制第一个li的图片
54 var cloneLi = ul.children[0].cloneNode(true);
55 ul.appendChild(cloneLi);
三. 自动滚动
1自动滚动
2鼠标移入停止定时器
3鼠标移出开始定时器
1 var s = setInterval(function(){
2 right.click();
3 },c)
来源：oschina
链接：https://my.oschina.net/u/4313645/blog/3789762