上一张 下一张
<script>
var banner = document.getElementById('banner');
var list = document.querySelectorAll('#banner>li');
var next = document.querySelector('#next');
var prev = document.querySelector('#prev');
var btns = document.querySelectorAll('section>span');
var view = document.getElementById('view')
var flag = true;
var index = 0;
function nextShow() {
if (flag) {
index++;
for (var j = 0; j < btns.length; j++) {
btns[j].style.backgroundColor = 'blue';
}
if (index >= list.length - 1) {
btns[0].style.backgroundColor = 'red';
} else {
btns[index].style.backgroundColor = 'red';
}
$_animation(banner, 'marginLeft', -500 * index, 1000, function () {
if (index >= list.length - 1) {
index = 0;
banner.style.marginLeft = 0;
}
})
flag = false;
}
}
function prevShow() {
if (flag) {
index--;
for (var j = 0; j < btns.length; j++) {
btns[j].style.backgroundColor = 'blue';
}
if (index < 0) {
btns[list.length - 2].style.backgroundColor = 'red'
} else {
btns[index].style.backgroundColor = 'red';
}
if (index < 0) {
index = list.length - 1;
banner.style.marginLeft = (-500 * (list.length - 1)) + 'px';
index--;
}
$_animation(banner, 'marginLeft', -500 * index, 1000);
flag = false;
}
}
next.onclick = nextShow;
prev.onclick = prevShow;
btns[0].style.backgroundColor = 'red';
for (var i = 0; i < btns.length; i++) {
btns[i].i = i;
btns[i].onmouseenter = function () {
for (var j = 0; j < btns.length; j++) {
btns[j].style.backgroundColor = 'blue';
}
index = this.i
$_animation(banner, 'marginLeft', -500 * index, 1000, function () {
if (index >= list.length - 1) {
index = 0;
banner.style.marginLeft = 0;
}
})
btns[this.i].style.backgroundColor = 'red';
}
};
var timer = setInterval(nextShow,2000)
//当鼠标移入view时候 清除定时器
view.onmouseenter = function(){
clearInterval(timer)
}
view.onmouseleave = function(){
timer = setInterval(nextShow,2000)
}
</script>