原生轮播图
/*
功能说明:
1. 点击向右(左)的图标, 平滑切换到下(上)一页
2. 无限循环切换: 第一页的上一页为最后页, 最后一页的下一页是第一页
3. 每隔3s自动滑动到下一页
4. 当鼠标进入图片区域时, 自动切换停止, 当鼠标离开后,又开始自动切换
5. 切换页面时, 下面的圆点也同步更新
6. 点击圆点图标切换到对应的页
*/
/**
* 根据id得到对应的标签对象
* @param {Object} id
*/
function $(id) {
return document.getElementById(id);
}
/**
* 给指定id对应的元素绑定点击监听
* @param {Object} id
* @param {Object} callback
*/
function click(id, callback) {
$(id).onclick = callback;
}
1 window.onload = function () {
2
3 var listDiv = $("list");
4 var totalTime = 400;//换页的总时间
5 var intervalTime = 20;//移动的间隔时间
6 var intervalId;//循环定时器的id(翻页中的不移动)
7 var imgCount = 5; //图片的个数
8 var moveing = false; //是否正在移动中
9 var index = 0;//当前显示图片的下标(从0开始到imgCount-1)
10 var buttonSpans = $("buttons").children; //所有标识圆点标签的集合
11 var containerDiv = $("container");
12 var intervalId2; //循环定时器的id(自动翻页)
13
14 //给下一页绑定点击监听
15 click("next", function () {
16 //切换到下一页
17 nextPage(true);
18 });
19
20 //给上一页绑定点击监听
21 click("prev", function () {
22 //切换到上一页
23 nextPage(false);
24 });
25
26 //给所有的提示圆点绑定点击监听
27 clickButtons();
28
29 //启动定时自动翻页
30 autoNextPage();
31 //给容器div绑定鼠标移入的监听: 停止自动翻页
32 containerDiv.onmouseover = function () {
33 clearInterval(intervalId2);
34 }
35 //给容器div绑定鼠标移出的监听: 启动自动翻页
36 containerDiv.onmouseout = function () {
37 autoNextPage();
38 };
39
40 /**
41 * 启动定时自动翻页
42 */
43 function autoNextPage() {
44 intervalId2 = setInterval(function () {
45 nextPage(true);
46 }, 3000);
47 }
48
49 /**
50 * 切换到下一页/上一页
51 * true 下
52 * false 上
53 * index 目标页
54 * @param {Object} next true
55 */
56 function nextPage(next) {
57
58 //如果正在移动, 直接结束
59 if (moveing) {
60 return;
61 }
62 //标识正在移动
63 moveing = true;
64
65 //需要进行的总偏移量
66 var offset;
67 if (typeof next === 'boolean') {
68 offset = next ? -600 : 600;
69 } else {
70 offset = -600 * (next - index);
71 }
72 //var offset = next ? -600 : 600;
73 //每个小移动需要做的偏移量
74 var itemOffset = offset / (totalTime / intervalTime);
75 //切换完成时div的left的坐标
76 var targetLeft = listDiv.offsetLeft + offset;
77 //循环定时器
78 intervalId = setInterval(function () {
79 //var currentLeft = listDiv.offsetLeft;
80 //得到当前这次偏移的样式left坐标
81 var left = listDiv.offsetLeft + itemOffset;
82 //如果已经到达目标位置
83 if (left == targetLeft) {
84 //移除定时器
85 clearInterval(intervalId);
86
87 //如果当前到达的是最左边的图片, 跳转到右边第二张图片的位置
88 if (left == 0) {
89 left = -imgCount * 600;
90 } else if (left == -600 * (imgCount + 1)) {//如果当前到达的是最右边的图片, 跳转到左边第二张图片的位置
91 left = -600;
92 }
93 //标识没有移动了
94 moveing = false;
95 }
96 //指定div新的left坐标
97 listDiv.style.left = left + "px";
98 }, intervalTime);
99
100 //更新标识圆点
101 updateButtons(next);
102 }
103
104 /**
105 * 更新标识圆点
106 * @param {Object} next
107 */
108 function updateButtons(next) {
109 //将当前的圆点更新为一般圆点
110 buttonSpans[index].removeAttribute("class");
111 //计算出目标圆点的下标
112 var targetIndex;
113 if (typeof next == 'boolean') {
114 if (next) {
115 targetIndex = index + 1;
116 if (targetIndex == imgCount) {
117 targetIndex = 0;
118 }
119 } else {
120 targetIndex = index - 1;
121 if (targetIndex == -1) {
122 targetIndex = imgCount - 1;
123 }
124 }
125 } else {
126 targetIndex = next;
127 }
128 //将标圆点的下标更新为当前下标
129 index = targetIndex;
130 //将目标圆点设置为当前圆点
131 buttonSpans[index].className = 'on';
132 }
133
134 /**
135 * 给所有的圆点设置点击监听
136 */
137 function clickButtons() {
138 for (var i = 0, length = buttonSpans.length; i < length; i++) {
139
140 buttonSpans[i].index = i;
141 buttonSpans[i].onclick = function () {
142 nextPage(this.index);
143 };
144
145 /*
146 (function (index) {
147 buttonSpans[index].onclick = function () {
148 nextPage(index);
149 };
150 })(i);
151 */
152 }
153 }
154 };