1. 功能分析

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

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

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

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

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

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

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

2. 实现流程2.1 页面和CSS

1.

页面结构如下：

2.

<div class="box"> <!--左右按钮--> <span class="arrow_l"><</span> <span class="arrow_r">></span> <!--轮播图--> <ul> <li><a href="#"><img src="images/focus.jpg" alt=""></a></li> <li><a href="#"><img src="images/focus1.jpg" alt=""></a></li> <li><a href="#"><img src="images/focus2.jpg" alt=""></a></li> <li><a href="#"><img src="images/focus3.jpg" alt=""></a></li> </ul> <!--小圆点--> <ol class="circle"></ol> </div>

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);