js 图片轮播代码编辑

图片轮播，将几张图片统一放在展示平台 banner上，通过banner移动将图片轮流播放。

<script>
// 取对象
var btn_l = document.getElementsByClassName('btn-l')[0];
var btn_r = document.getElementsByClassName("btn-r")[0];
var banner = document.getElementById("banner");
var dots = document.getElementsByClassName('dot');
// 定义变量
var count = 1;
var arr = [];
// 右侧按钮点击事件
btn_r.onclick = function() {
if(count < 6) {
count++;
arr.push(window.setInterval("move_left()", 20));
} else if(count == 6) {
count = 1;
banner.style.marginLeft = 0 + 'px';

count++;
arr.push(window.setInterval("move_left()", 20));
}
for(var i = 0; i < dots.length; i++) {
dots[i].setAttribute("class", "dot");
}
dots[count - 1].setAttribute("class", "dot active");
}
// 左侧按钮点击事件
btn_l.onclick = function() {
if(count > 1) {
count--;
arr.push(window.setInterval("move_right()", 20));
}else if(count == 1){
count = 6;
banner.style.marginLeft = -2500 + 'px';

count--;
arr.push(window.setInterval("move_right()", 20));
}

for(var i = 0; i < dots.length; i++) {
dots[i].setAttribute("class", "dot");
}
dots[count - 1].setAttribute("class", "dot active");
}
// 向左移动
function move_left() {
if(banner.offsetLeft == (count - 1) * (-500)) {
clear();
} else {
banner.style.marginLeft = banner.offsetLeft - 20 + "px";
}

}
// 向右移动
function move_right() {
if(banner.offsetLeft == (count - 1) * (-500)) {
clear();
} else {
banner.style.marginLeft = banner.offsetLeft + 20 + "px";
}
}
// 清除所有间隔执行
function clear() {
for(var x in arr) {
window.clearInterval(arr[x]);
}
}
// 批量添加点击事件
for(var j = 0; j < dots.length; j++) {
dots[j].onclick = function() {

count_s = this.getAttribute("data");
if(count > count_s) {
count = count_s;
arr.push(window.setInterval("move_right()", 20));
} else if(count < count_s) {
count = count_s;
arr.push(window.setInterval("move_left()", 20));
}

for(var i = 0; i < dots.length; i++) {
dots[i].setAttribute("class", "dot");
}
this.setAttribute("class", "dot active");
}
}
// 自动轮播 将点击事件放在新事件中，然后设定间隔执行。window.setInterval()
function auto_move(){
if(count < 6) {
count++;
arr.push(window.setInterval("move_left()", 20));
} else if(count == 6) {
count = 1;
banner.style.marginLeft = 0 + 'px';

count++;
arr.push(window.setInterval("move_left()", 20));
}
for(var i = 0; i < dots.length; i++) {
dots[i].setAttribute("class", "dot");
}
dots[count - 1].setAttribute("class", "dot active");
}

window.setInterval("auto_move()",3000);
</script>