window.addEventListener('load',function(){
var arrow_l = document.querySelector('.arrow-l');
var arrow_r = document.querySelector('.arrow-r');
var focus = document.querySelector('.focus');
var fw = focus.offsetWidth;
focus.addEventListener('mouseenter',function(){
arrow_l.style.display = 'block';
arrow_r.style.display = 'block';
clearInterval(timer);
timer = null;//清除定时器变量
})
focus.addEventListener('mouseleave',function(){
arrow_l.style.display = 'none';
arrow_r.style.display = 'none';
var timer = setInterval(function(){
//手动调用带点击事件
arrow_r.click();
},3000);
})
//动态生成小圆圈
var ul = focus.querySelector('ul');
var ol = focus.querySelector('.cirbox');
// console.log(ul.children.length);
for (var i = 0;i < ul.children.length;i++){
//创建一个li
var li = document.createElement('li');
//记录当前小圆点的索引号,通过自定义属性来做
li.setAttribute('index',i);
ol.appendChild(li);
//选中谁书就变色
li.addEventListener('click',function(){
for(var i = 0;i < ol.children.length;i++){
ol.children[i].className = '';
}
this.className = 'active'
var index = this.getAttribute('index');
num = index;
circle = index;
//点击小圆圈移动图片
animate(ul,-index * fw,);
})
}
// 克隆第一张到后面
ol.children[0].className = 'active';
var first = ul.children[0].cloneNode(true);
ul.appendChild(first);
//点击右侧按钮,图片滚动
var num = 0;
var circle = 0;
arrow_r.addEventListener('click',function(){
if(num == ul.children.length-1){
ul.style.left = 0;
num = 0;
}
num++;
animate(ul,-num*fw);
circle++;
if(circle == ol.children.length){
circle = 0;
}
for(var i = 0;i < ol.children.length;i++){
ol.children[i].className = '';
}
ol.children[circle].className = 'active';
})
arrow_l.addEventListener('click',function(){
if(num == 0){
num = ul.children.length-1;
ul.style.left = -num*fw+'px';
}
num--;
animate(ul,-num*fw);
circle--;
if(circle < 0){
circle = ol.children.length-1;
}
for(var i = 0;i < ol.children.length;i++){
ol.children[i].className = '';
}
ol.children[circle].className = 'active';
})
//定时器
var timer = setInterval(function(){
//手动调用带点击事件
arrow_r.click();
},3000);
})
做个节流就好了
速度越来越快,证明你又启动多一个定时器,同时执行