轮播图 + js实现

html -----------------------------------------------

<section class="banner">
<ul>
<li> <a href="javascript:;"><img src="./uploads//banner_1.png" alt=""></a> </li>
<li> <a href="javascript:;"><img src="./uploads//banner_1.png" alt=""></a> </li>
<li> <a href="javascript:;"><img src="./uploads//banner_1.png" alt=""></a> </li>
<li> <a href="javascript:;"><img src="./uploads//banner_1.png" alt=""></a> </li>
<li> <a href="javascript:;"><img src="./uploads//banner_1.png" alt=""></a> </li>
                
                
</ul>  <!-- 焦点图   ending-->

<!-- 左右箭头 -->
<a href="javascript:;" class="prev"></a>
<a href="javascript:;" class="next"></a>

 <!-- 轮播图指示器 -->
<ol class="indicator">
                
</ol>
</section>


css ------------------------------------------------------------

.banner {
  position: relative;
  width: 1240px;
  height: 500px;
  overflow: hidden;
}
.banner ul {
  position: absolute;
  top: 0;
  left: 0;
  width: 600%;
}
.banner ul li {
  float: left;
}
/* -----------------------轮播图左右箭头 */
.banner .prev,
.banner .next {
  position: absolute;
  top: 228px;
  left: 260px;
  display: none;
  width: 45px;
  height: 45px;
  /* background-color: rgba(0,0,0,.2); */
  background: rgba(0,0,0,.2) url('../images/sprites.png') 14px -60px;
  border-radius: 50%;
}

.banner .next {
  left: 1185px;
  background-position: -23px -60px;
}
/* -------------------轮播图指示器 */
.indicator {
    position: absolute;
    left: 672px;
    bottom: 31px;
  }
  
.indicator li {
    float: left;
    width: 10px;
    height: 10px;
    margin: 0 8px;
    background-color: rgba(255,255,255,.4);
    border-radius: 50%;
  }
  
.indicator li.active {
    background-color: #fff;
  }


animate.js 封装的移动动画 ------------------------------------------------------------

function animate(obj, target, callback) {
    // console.log(callback);  callback = function() {}  调用的时候 callback()

    // 先清除以前的定时器，只保留当前的一个定时器执行
    clearInterval(obj.timer);
    obj.timer = setInterval(function() {
        // 步长值写到定时器的里面
        // 把我们步长值改为整数 不要出现小数的问题
        // var step = Math.ceil((target - obj.offsetLeft) / 10);
        var step = (target - obj.offsetLeft) / 10;
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        if (obj.offsetLeft == target) {
            // 停止动画 本质是停止定时器
            clearInterval(obj.timer);
            // 回调函数写到定时器结束里面
            // if (callback) {
            //     // 调用函数
            //     callback();
            // }
            callback && callback();
        }
        // 把每次加1 这个步长值改为一个慢慢变小的值  步长公式：(目标值 - 现在的位置) / 10
        obj.style.left = obj.offsetLeft + step + 'px';

    }, 15);
}



js 文件 ------------------------------------------------------------
window.addEventListener('load', function() {
// alert('11')
var banner = document.querySelector('.banner')
var prev = document.querySelector('.prev')
var next = document.querySelector('.next')
// banner 的宽度
var bannerWidth = banner.offsetWidth
// 1. 鼠标经过banner 就显示隐藏左右按钮 mouseenter 
banner.addEventListener('mouseenter', function() {
    prev.style.display = 'block';
    next.style.display = 'block';
    // 停止自动轮播 清除定时器
    clearInterval(timer);
    timer = null; // 清除定时器变量

})
// 1. mouselesve 鼠标离开 左右箭头隐藏 
banner.addEventListener('mouseleave', function() {
    prev.style.display = 'none';
    next.style.display = 'none';
    // 鼠标离开，轮播图自动播放
    timer = setInterval(() => {
        // 手动调用点击事件
        next.click();
    }, 3000);

})

// 2. 动态生成小圈圈 active
var ul = banner.querySelector('ul');
var ol = banner.querySelector('ol');
// console.log(ul.children.length);
for(var i = 0; i < ul.children.length; i++) {
    // 创建一个小 li
    var li = this.document.createElement('li');
    // 记录当前的索引号，通过自定义属性
    li.setAttribute('index',i);
    // 将小li 插入到 ol 里面
    ol.appendChild(li);
    // 利用排他思想，给第一个小li做点击后的高亮效果，直接给小圈圈绑定点击事件
    li.addEventListener('click', function() {
        // 干掉所有人，去除所有人的class类名字
        for (var i = 0; i < ol.children.length; i++) {
        ol.children[i].className = '';
        // 留下我自己
        this.className = 'active';
        // 3. 点击小圆点，移动图片
        var index = this.getAttribute('index');
         // 当我们点击了某个小li 就要把这个li 的索引号给 num  
         num = index;
         // 当我们点击了某个小li 就要把这个li 的索引号给 circle  
         circle = index;
        // console.log(index);
        // console.log(bannerWidth);
        animate(ul, -index * bannerWidth)
        }
    })

}
// 把ol 里面的第一个小 li 设置为高亮
ol.children[0].className = 'active';

// 5. 克隆第一张图片到最后面
var first = ul.children[0].cloneNode(true);
// 放到ul里面的最后一张
ul.appendChild(first);

// 6. 点击右侧按钮图片滚动一张
var num = 0;
// 7.circle 控制小圆圈的播放
var circle = 0;
// 节流阀
var flag = true;
// 4.点击右侧按钮，自增加1
next.addEventListener('click', function() {
    // alert('1')  测试是否生效
    // 如果走到了最后一张图片，此时我们的ul 要快速复原left = 0 ;
    if (flag) {
        flag = false; // 关闭节流阀
        if (num == ul.children.length - 1) {
            ul.style.left = 0;
            num = 0
        }
        num++
        animate(ul, -num * bannerWidth, function() {
            flag = true
        })
        // 8. 点击右侧按钮，小圆圈跟随一起变化 可以再声明一个变量控制小圆圈的播放
        circle++;
         // 如果circle == 4 说明走到最后我们克隆的这张图片了 我们就复原
         if (circle == ol.children.length) {
             circle = 0;
         };
    
        // 清除小圆圈样式
         circleChange();
    
    }
})

// 8.点击左侧按钮，自增加1
prev.addEventListener('click', function() {
    // alert('1')  测试是否生效
    if (flag) {
        flag = false
        // 如果num=0 点击左侧按钮 应该走到最后一张图片
    if (num == 0) {
        num = ul.children.length - 1
        // 最后一张图片距离左侧的距离 banner的宽度 * 4
        ul.style.left = -num * bannerWidth + 'px';
        
    }
    num--
    animate(ul, -num * bannerWidth, function() {
        flag = false;
    })
    // 8. 点击右侧按钮，小圆圈跟随一起变化 可以再声明一个变量控制小圆圈的播放
    circle--;
     // 如果circle < 0 说明第一张图片，小圈圈要改为最后一个小圈圈 length-1
    //  if (circle < 0) {
    //      circle = ol.children.length - 1;
    //  };
     circle = circle < 0 ? ol.children.length - 1 : circle;
     circleChange();
    }

});
// 去除小圆圈样式背景颜色
function circleChange() {

    //  先清除其他小圆点的 active 类
    for (var i = 0; i < ol.children.length; i++) {
        ol.children[i].className = '';
    }
    ol.children[circle].className = 'active'
}

// 10. 自动播放轮播图
var timer = setInterval(() => {
    // 手动调用点击事件
    next.click();
}, 3000);

})