1. 功能分析

实现如图所示的轮播图，要实现的功能主要有：

鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮。

点击右侧按钮一次，图片下滑一张；点击左侧按钮，图片上滑一张。

图片播放的同时，下面小圆圈模块跟随一起变化。

点击小圆圈，可以播放相应图片。

鼠标不经过轮播图，轮播图也会自动播放。

鼠标经过，轮播图模块自动播放停止。

2. 实现流程

2.1 页面和CSS

1.

页面结构如下：

2.

 
 <
 >
 
 

 

 

 

 

 
 
 

 

1.

页面样式

2.

* {
 margin: 0;
 padding: 0;
}

/*去除列表样式*/
li {
 list-style-type: none;
}


.box {
 width: 430px;
 margin: 100px auto;
 position: relative;
 height: 271px;
 overflow: hidden;
}

/*左右按钮*/
.arrow_l,
.arrow_r {
 display: none;
 position: absolute;
 top: 50%;
 /* left: 0; */
 transform: translateY(-50%);
 width: 20px;
 height: 30px;
 background-color: rgba(0, 0, 0, .4);
 color: #fff;
 text-align: center;
 line-height: 30px;
 cursor: pointer;
}

.arrow_r {
 right: 0;
}

.arrow_l:hover,
.arrow_r:hover {
 background-color: rgba(0, 0, 0, .8);
}

/* 把ul盒子加长，以便于图片能一排显示 */
.box ul {
 width: 600%;
 position: absolute;
 top: 0;
 left: 0;
 z-index: -1;
}

/* 图片一排显示 */
.box ul li {
 float: left;
}

.box ul img {
 width: 430px;
}

/*小圆点所在列表*/
.circle {
 position: absolute;
 bottom: 6%;
 left: 50%;
 transform: translateX(-50%);
 /* width: 150px; */
 /* height: 20px; */
 /* background-color: pink; */
 /* display: table; */
}

/*小圆点默认样式*/
.circle li {
 float: left;
 width: 8px;
 height: 8px;
 border: 2px solid rgba(255, 255, 255, .4);
 border-radius: 8px;
 background-color: rgba(0, 0, 0, .4);
 margin-left: 5px;
 cursor: pointer;
}

/* 小圆点被点击时 添加class=current属性，使得css样式引用如下*/
.circle .current {
 background-color: #fff;
}

2.2 JS思想和实现

2.2.1 功能1：显示隐藏左右按钮。

鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮

window.addEventListener('load',function(){

 //1.鼠标经过才显示左右箭头，鼠标离开时隐藏
 var box= document.querySelector('.box');
 var arrow_l=document.querySelector('.arrow_l');
 var arrow_r=document.querySelector('.arrow_r');
 var imgWidth=box.offsetWidth;
 
 //鼠标经过时，停止自动播放
 box.addEventListener('mouseover',function(){
 arrow_l.style.display='block';
 arrow_r.style.display='block';
 clearInterval(timer);
 timer=null;
 })
 
 //鼠标离开时，恢复自动播放
 box.addEventListener('mouseout',function(){
 arrow_l.style.display='none';
 arrow_r.style.display='none';
 timer=setInterval(function(){
 arrow_r.click();
 },2000);
 })
 
 //...后续的功能代码都是放在此监听事件里面，就单独说明了
 
}

2.2.2 功能2：生成小圆点并且给小圆点绑定点击事件

//2.根据轮播图的图片个数，动态生成小圆点
 var ul=box.querySelector('ul');
 var ol=box.querySelector('.circle');

 var num=0;//图片的索引号
 var circle=0;//小圆点的索引号
 //小圆点的索引号和图片的索引号不能使用同一个，因为小圆点个数比图片要少一个，会超出索引

 for(var i=0;i<ul.children.length;i++){
 //创建元素，然后给circle添加
 var li=document.createElement('li');
 //通过自定义属性存储和获取小圆点索引
 li.setAttribute('data-index',i);
 ol.appendChild(li);

 //同时给小圆点注册点击事件
 li.addEventListener('click',function(){
 //点击小圆点，改变样式，注意排他性
 for(var i=0;i<ol.children.length;i++){
 ol.children[i].className='';
 }
 this.className='current';

 //3.点击小圆点，滑动到对应图片
 var index=this.getAttribute('data-index');
 
 //如animate方法的实现在2.2.3说明
 animate(ul,-index*imgWidth);
 
 //注意让其与点击方向箭头的事件索引号保持一致
 num=index;
 circle=index;
 })
 }

 //默认ol中的第一个li被选中
 ol.children[0].className='current';

2.2.3 核心动画效果（定义在另一个js文件：animate.js)

通过定时函数，每隔一小段时间不断调用animate函数，每次调整图片向左的偏移量，实现滑动的动画效果。

//动画函数
function animate(obj, target, callback) {
 //先清除一下之前的定时器，保证只留下一个定时器
 clearInterval(obj.timer);
 
 obj.timer = setInterval(function () {
 /*如果正好轮播到当前小圆点对应的图片，则清除定时器重置即可*/
 if (obj.offsetLeft == target) {
 clearInterval(obj.timer);

 //在动画执行完之后，如果有回调函数，就调用它
 if (callback) {
 callback();
 }
 } else {
 /*目标图片偏移量-当前图片偏移量。*/
 var step = (target - obj.offsetLeft) / 10;
 step = step > 0 ? Math.ceil(step) : Math.floor(step);
 obj.style.left = obj.offsetLeft + step + 'px';
 }
 }, 15);
}

2.2.4 功能3：点击右箭头

//4.点击右箭头，换一张图片，图片往后滑动一次

 //给ul末尾添加第一张图片，完成无缝滑动效果
 //cloneNode()参数为true，表示深拷贝，拷贝他下面的所有子节点
 var li=ul.children[0].cloneNode(true);

 //注意这里因为写在生成小圆点函数的下面，js按顺序执行，所以不会影响生成小圆点的个数
 ul.appendChild(li);

 arrow_r.addEventListener('click',function(){

 //如果num===ul.children.length-1，说明已经到了复制的那张图片了
 if(num===ul.children.length-1){
 //不要动画效果，直接回到起点，瞬间的效果
 ul.style.left=0;
 num=0;
 }
 num++;
 animate(ul,-num*imgWidth);

 //5.点击右箭头切换图片时，对应的小圆点要改变样式，注意排他
 //小圆点先自增后判断
 circle++;
 if(circle===ol.children.length){
 circle=0;
 }
 circleChange();
 })

2.2.5 功能4：点击左箭头

//6.点击左箭头，换一张图片，图片往前滑动一次
 arrow_l.addEventListener('click',function(){
 //如果num===0，说明已经到了第一张图片
 if(num===0){
 //不要动画效果，直接回到最后一张图片，瞬间的效果，一定要记得加px！
 num=ul.children.length-1;
 ul.style.left=-num*imgWidth +'px';
 }
 num--;
 animate(ul,-num*imgWidth);

 //对应的小圆点要改变样式，注意排他
 circle--;
 if(circle<0){
 circle=ol.children.length-1;
 }
 circleChange();

 })

 //小圆点随图片改变方法
 function circleChange(){
 for(var i=0;i<ol.children.length;i++){
 ol.children[i].className='';
 }
 ol.children[circle].className='current';
 }

2.2.6 功能5：自动播放

//7.图片自动播放
 //自动播放的效果和鼠标点击右箭头的效果是一样的，所以我们只需要定时手动调用右箭头的鼠标点击事件
 var timer=setInterval(function(){
 arrow_r.click();
 },2000);