/*关于轮播图，相信大家都不陌生，各大网站上都有它的身影。

*那么我们如何实现这样一个东西呢？

*希望这篇博文能帮到你

*/

/*上图就是我们今天需要实现的效果

先来确认一下我们的需求：

需求1：鼠标移入轮播图，显示上一页，下一页的箭头，鼠标移出消失

需求2：点击上一页，下一页实现图片切换，导航栏的数字效果跟着变化

需求3：点击导航页码，也可以实现图片切换

需求4：让他实现自动轮播，鼠标移入轮播图取消自动轮播

*/

/*首先先分析一下我们的页面构成，我们用一个div把可视区域、页码导航部分、上一页下一页包裹起来

可视区域包裹着一个ul标签，里面每一个li标签装有我们需要轮播的图片

设定ul的宽度等于li标签数量乘以图片的真实宽度(offsetWidth)，让我们的图片呈一列显示，

无论用浮动还是定位的方式都可以，本例子用定位的方式，为什么叻？因为我们div还装有别的一些东西，

也需要用到定位，这样比较方便一点...代码后面呈现，我们现在开始从需求1开始分析

*/

需求1

这个需求实现比较简单，我们只需要给装有这些元素的大盒子加上一个onmouseover事件和onmouseout事件

让上一页下一页部分显示或者隐藏即可 用到display属性。

需求2

给我们的上一页下一页添加点击事件，onclick

页面默认显示第一张，所以我们可以设置一个变量index来记录我们当前轮播的是哪张图片。

每点击一次下一页index++，再调用我封装好的animation方法实现平移效果切换。(每点击一次，ul向左移动...实现图片切换)

紧接着，如果页码下标与index一致，说明是当前页面，需要改变样式

ok，这样一来，我们基本需求就实现了，那么现在问题又来了，当index达到第5张的时候，此时index=4，

我再点一次会发生什么情况？会发现ul移到了没有图片的地方，页码导航也随之没有了样式

这种情况，我们如何解决呢？为了更好的实现我们的效果，其实我们可以加多一行li代码存储第1张的图片，

当我们点击的时候，index=5，虽然我们程序员知道这是第六张，但在用户眼里，这就是第一张图片，

我们做一个特殊处理，将第一页的页码的样式修改。

当我们在第六张点击的时候，此时我们可以修改ul的位置，再将index设置为0，让它继续进行下一页的操作。

这样我们就可以神不知鬼不觉的实现我们的需求啦。

上一页也是同样的原理。

需求3

我们给每一个页码导航一个属性，让它代表它是对应的哪一张图片，

当我们点击页码的时候，将这个属性取出来，赋值给我们的全局变量index，

这样一来，我们就可以轻松的实现我们动画平移的效果，

再使用排他思想，除了点击的这个以外，样式清空，只给我们这个点击的赋予样式。

需求4

这个就比较简单了，设置一个定时器，每隔一秒钟触发一次下一页的函数体即可，

给大盒子的鼠标移入事件加入清除计时器的效果，移出的时候重新开启计时器效果，

PS：记得保存计时器id，用于清除

接下来看下我们完整的代码吧，希望这篇博文对你有帮助。

padding:0;

margin:0;

list-style:none;

border:0;

}

.all {

width:500px;

height:200px;

padding:7px;

border:1px solid #ccc;

margin:100px auto;

position:relative;

}

.screen {

width:500px;

height:200px;

overflow:hidden;

position:relative;

}

.screen li {

width:500px;

height:200px;

overflow:hidden;

float:left;

}

.screen ul {

position:absolute;

left:0;

top:0px;

width:3000px;

}

.all ol {

position:absolute;

right:10px;

bottom:10px;

line-height:20px;

text-align:center;

}

.all ol li {

float:left;

width:20px;

height:20px;

background:#fff;

border:1px solid #ccc;

margin-left:10px;

cursor:pointer;

}

.all ol li.current {

background:yellow;

}

#arr {

display:none;

}

#arr span {

width:40px;

height:40px;

position:absolute;

left:5px;

top:50%;

margin-top:-20px;

background:#000;

cursor:pointer;

line-height:40px;

text-align:center;

font-weight:bold;

font-family:'黑体';

font-size:30px;

color:#fff;

opacity:0.3;

border:1px solid #fff;

}

#arr #right {

right:5px;

left:auto;

}

需求分析：(1)每隔2s，自动实现下一页点击功能

(2)当鼠标移入box时，清除定时器，切换手动操作

(3)当鼠标移出box时，开启定时器，切换自动轮播

* 细节：下一页逻辑代码会执行多次，只需要放入函数中(解决代码复用的问题)

*/

//1.获取元素

var box = id('box');//最外面div，有边框

var screen = document.getElementsByClassName('screen')[0];//获取图片可视div,screen

var ul = screen.children[0];//图片列表ul标签

var ol = screen.children[1];//页码标签

var liList = ul.children;//图片li标签数组

var olList = ol.children;//页码li标签数组

var arr = id('arr');//上一页下一页所在的div

var left = id('left');//上一页按钮

var right = id('right');//下一页按钮

//声明一个全局变量，记录当前应该显示图片的下标

var index = 0;

var timeID = null;//记录自动轮播定时器id

timeID = setInterval(function ( ) {

nextPage();

},2000);

//2.鼠标移入移出，显示/隐藏上一页下一页按钮

box.onmouseover = function ( ) {

arr.style.display = 'block';

//清除自动轮播，切换手动操作

clearInterval(timeID);

}

box.onmouseout = function ( ) {

arr.style.display = 'none';

timeID = setInterval(function ( ) {

nextPage();

},2000);

}

//3.上一页下一页点击事件

//上一页

left.onclick = function ( ) {

//(1)边界检测

if(index == 0){//如果是第一张 index = 0

//修改index为最大下标

index = liList.length-1;

//瞬间修改ul的位置为最后一张

ul.style.left = -index*screen.offsetWidth + 'px';

}

//(2)图片下标-1

index--;

//(3)动画滚动图片 移动距离： index* screen盒子的宽度

animationMove(ul,-index*screen.offsetWidth);

//(4)使用排他思想改变页码样式

for(var i = 0;i

if(i == index){//如果页码下标与index一致，说明是当前页面，需要改变样式

olList[i].className = 'current';

}else{

olList[i].className = '';

}

}

//(5)如果是数组的最后一张，页码应该显示第一张

if(index == liList.length-1){

olList[0].className = 'current';

}

console.log ( index );

}

//下一页

right.onclick = function ( ) {

nextPage();

}

//将下一页的逻辑代码存入函数中

function nextPage ( ) {

//(1)边界检测

if(index == liList.length-1){//如果index图片下标是图片数组的最大下标则不移动

ul.style.left = '0px';//瞬间改变ul的位置为0

index = 0;//下标复位

}

//(2)图片下标+1

index++;

//(3)动画滚动图片 移动距离： index* screen盒子的宽度

animationMove(ul,-index*screen.offsetWidth);

//(4)使用排他思想改变页码样式

for(var i = 0;i

if(i == index){//如果页码下标与index一致，说明是当前页面，需要改变样式

olList[i].className = 'current';

}else{

olList[i].className = '';

}

}

//(5)如果是数组的最后一张，页码应该显示第一张

if(index == liList.length-1){

olList[0].className = 'current';

}

console.log ( index );

}

//4.给页码添加点击事件

for(var i = 0;i

//4.1 给每一个页码添加一个自定义属性记录下标

olList[i].setAttribute('yemaIndex',i);

olList[i].onclick = function ( ) {

//4.2 获取当前页码点击的下标

var yemaIndex = this.getAttribute('yemaIndex');

//4.3 修改index位置为页码下标

index = yemaIndex;

//4.4 开始滚动

animationMove(ul,-index*screen.offsetWidth);

//4.5 使用排他思想改变页码样式

for(var j = 0;j

if(olList[j] == this){

this.className = 'current';

}else{

olList[j].className = '';

}

}

}

}

/*

** Create by zengjiahao on 2018/04/26

* 动画封装函数

*/

/**1.平移动画

*

* @param obj 要移动的元素

* @param target 要移动的目标距离

*/

function animationMove ( obj,target ) {

//每一次移动之前，先结束上一次的定时器

clearInterval(obj.timeID);

/*1.全局变量只能存储一个定时器，无法实现多个元素同时移动

2.每一个元素在移动的时候，将定时器作为自己的属性

* 类似于运动员在跑步的时候，每一个运动员的身上都有一个标签记录定时器，

谁到达终点，回收谁的定时器

*/

obj.timeID = setInterval(function ( ) {

//1.获取元素当前位置

var currentLeft = obj.offsetLeft;

//2.计算本次移动的距离

/* 从左往右移动： 目标位置 > 当前位置 当前位置+=10

从右往左移动： 目标位置 < 当前位置 当前位置-=10

ifLeft: true:从左往右 false：从右往左

*/

var isLeft = target>currentLeft?true:false;

if(isLeft){

currentLeft += 15;

}else{

currentLeft -= 15;

}

//3.边界检测

/*从左往右true: currentLeft < target

从右往左false: currentLeft > target

边界检测思路：

* 如果isLeft为true，current

* 如果isLeft为false，currentLeft > target这个条件成立，需要移动，否则到达目的地

*/

//这个三元表达式： 如果isLeft是true则返回currentLefttarget

if(isLeft==true?currentLefttarget){

obj.style.left = currentLeft + 'px';

}else{

clearInterval(obj.timeID);//清除定时器

obj.style.left = target + 'px';

}

},10);

}