js轮播图

window.addEventListener(‘load’, function(){
var banner = document.querySelector(‘.banner’);
var arrow_r = banner.querySelector(‘.arrow_r’);
var arrow_l = banner.querySelector(‘.arrow_l’);
//1、鼠标经过显示隐藏箭头
banner.addEventListener(‘mouseenter’, function(){
arrow_r.style.display = ‘block’;
arrow_l.style.display = ‘block’;
//经过时停止定时器
clearInterval(tiemr);
tiemr = null;
});
banner.addEventListener(‘mouseleave’, function(){
arrow_r.style.display = ‘none’;
arrow_l.style.display = ‘none’;
//离开时开启定时器
tiemr = setInterval (function(){
arrow_r.click();
},2000);
});

//圆点随ul li增或减
var ul = banner.querySelector(‘ul’);
var ol = banner.querySelector(‘ol’);
var img_Move = banner.offsetWidth;
for (var i = 0; i < ul.children.length; i++) {
var li = this.document.createElement(‘li’);
ol.appendChild(li);
//给ol li添加index属性
ol.children[i].setAttribute(‘index’, i);
//给ol ll点击事件，用排他思想，除当前点击样式，其他点击样式删除
li.addEventListener(‘click’, function() {
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].style.backgroundColor = ‘’;
};
this.style.backgroundColor = ‘red’;
//获取点击圆点的index
var index = this.getAttribute(‘index’);
//点击li，把li的index给num关联
num = index;
//点击li，把li的index给circle关联
circle = index;
console.log(index);
animate(ul, -index*img_Move);
});
}
ol.children[0].style.backgroundColor = ‘red’;
//克隆第一张图片到最后
var first = ul.children[0].cloneNode(true);
ul.appendChild(first);
//声明一个num变量自增、增减，点击箭头轮播图走动；不用index，因为是局部变量，无法使用
var num = 0;
//圆点跟箭头点击变化底色，先声明一个变量，每次点击自增/自减
var circle = 0;
//右箭头无缝滚动！不用li.length的原因因为li在函数内，无法调用

        //节流函数
var flag = true;
arrow_r.addEventListener('click', function () {
    if (flag) {
        flag = false;  
    if (num == ul.children.length - 1) {
        ul.style.left = 0;
        num = 0;
    }
    num++;
    animate(ul, -num * img_Move,function(){
        flag = true;
    });
    //圆点自增
    circle++;

    if (circle == ol.children.length){
        circle = 0;
    }
    circleChange();
}
    }

);
//小圆点函数封装
function circleChange () {
//排他思想，否则圆点都为底色
for (var i = 0 ; i < ol.children.length; i++) {
ol.children[i].style.backgroundColor = ‘’;
}
ol.children[circle].style.backgroundColor = ‘red’;
};

    //左箭头无缝滚动！不用li.length的原因因为li在函数内，无法调用
    arrow_l.addEventListener('click', function () {
        if(flag){
            flag = false;
            if (num == 0) {
                num = ul.children.length - 1;
                ul.style.left = -num * img_Move + 'px';                
            }
            num--;
            animate(ul, -num * img_Move, function(){
                flag = true;
            });
            //圆点自增
            circle--;
    
            if (circle < 0 ){
                circle = ol.children.length -1;
            }
            circleChange();
        }
    });

    //自动播放轮播图
    var tiemr = setInterval (function(){
        arrow_r.click();
    },2000);

});