上回埋下的伏笔今天来补上，前两个轮播图显然不太好用（但是在一些场景下还是可以用的，比如不需要焦点的左右轮播，可以用轮播图（2），嗨淘的轮播图，是淡入淡出的轮播图（1），网上还是有很多同款轮播图的），今天这个轮播还是左右滑动的轮播图，但是在体验上相对最为优秀，尤其是对焦点点击效果的处理，绝对好用。
1、思路
我知道没有图你不会来的，嘿嘿
1.1 css样式布局
介绍一下上图的布局思路
容器banner当然有个相对固定的宽高（说相对固定是针对响应式布局），ul的大小和最大的容器一致，不过有个相对定位属性，里面的每个盛放img的li宽高当然都和ul相同（按照自己需要设定），所有的li都绝对定位，第一个li放在ul中，其余的li都用相对定位定于容器外部的正右边，
1.2 js的大致思路
自动循环轮播的图片，当前图片向左滑动，下一张图片就紧接着向左滑动进入可视区域banner，以此类推，用全局索引实现循环来回播放，当然需要借助animate()方法和css()方法。
大致流程如下：
①自动轮播和点击下一张流程
当前图片(index)滑向左边，移出可视区域->下一张图片(index+1)用css()方法回到最右边，做滑动准备->下一张图片(index+1)滑向容器，移入可视区域
②点击上一张流程
当前图片(index)滑向右边，移出可视区域->下一张图片(index-1)用css()方法回到最左边，做滑动准备->下一张图片(index-1)滑向容器，移入可视区域
当然，自动轮播和点击下一张流程，点击上一张流程都需要判断索引号是否过大或者过小，做出相应的重新赋值准备
③点击焦点时
当点击的焦点索引大于当前在可视区域图片（li）的索引
当前图片(index)滑向左边，移出可视区域->下一张图片(焦点索引对应的图片)用css()方法回到最右边，做滑动准备->下一张图片(焦点索引对应的图片）滑向容器，移入可视区域
当点击的焦点索引小于当前在可视区域图片（li）的索引
当前图片(index)滑向右边，移出可视区域->下一张图片(焦点索引对应的图片)用css()方法回到最左边，做滑动准备->下一张图片(焦点索引对应的图片）滑向容器，移入可视区域
注意：注意animate()方法和css()方法的使用，animate()方法有过渡的效果，用来做滑动效果最合适，css()没有任何过渡效果，用来做不动声色的li转移
2、开搞
2.1 html代码
<div class="lunbo" id="banner">
<ul>
<li><a href="#">[站外图片上传中……(2)]</a></li>
<li><a href="#">[站外图片上传中……(3)]</a></li>
<li><a href="#">[站外图片上传中……(4)]</a></li>
<li><a href="#">[站外图片上传中……(5)]</a></li>
<li><a href="#">[站外图片上传中……(6)]</a></li>
<li><a href="#">[站外图片上传中……(7)]</a></li>
<li><a href="#">[站外图片上传中……(8)]</a></li>
</ul>
<div>
<span class="contr">
<!-- <i class="on"></i><i></i><i></i><i></i><i></i><i></i><i></i> -->
</span>
</div>
<div>
<button title="上一张" class="prev"><</button>
<button title="下一张" class="next">></button>
</div>
</div>
2.2 css代码
*{padding:0;margin:0;list-style: none;}
.lunbo{
width:500px;
height:312px;
overflow: hidden;
margin:0 auto;
position:relative;
}
.lunbo>ul{
height:312px;
position: relative;
}
.lunbo>ul li{
float:left;
position: absolute;
left:500px;
top:0;
}
.lunbo>ul li:nth-child(1){
left:0px;
}
.lunbo div:nth-child(2){
width:100%;
height:20px;
position: absolute;
margin:0 auto;
top:280px;
}
.lunbo div span{
display: block;
height:30px;
width:210px;
padding: 0px 10px;
margin: 0 auto;
}
.lunbo>div>span i{
display:block;
width:16px;
height:16px;
border-radius: 50%;
background:chocolate;
border:2px solid chocolate;
margin-right:10px;
float:left;
cursor:pointer;
}
.lunbo div span i:last-child{
margin-right: 0;
}
.lunbo>div>span .on{
background:white;
}
.lunbo div:nth-child(3){
width:100%;
position: absolute;
top:110px;
left:0;
}
.lunbo div:nth-child(3) button{
width:40px;
height:60px;
background: #ccc;
color:#FFF;
border:0;
outline:none;
opacity: 0.5;
font-size: 30px;
cursor:pointer;
}
.lunbo div:nth-child(3) button:first-child{
float:left;
margin-left:10px;
}
.lunbo div:nth-child(3) button:last-child{
float:right;
margin-right:10px;
}
2.3 js代码
$(function(){
//创建控制小圆点
var is=$('#banner>ul li').length;
for(i=0;i<is;i++){
$('<i order='+i+'></i>').appendTo('.contr');
}
//给予第一个小圆点class属性
$('#banner .contr i').first().addClass('on');
//定义一个全局索引
var index = 0;
//封装一个函数，使当前索引对应的焦点（小圆点）显示不同于其他焦点的状态，方便下边的一次次调用
function focus(){
$('#banner .contr i').removeClass('on');
$('#banner .contr i').eq(index).addClass('on');
}
//给每个焦点添加点击事件
$('#banner .contr i').click(function(){
//获取当前点击的焦点的索引值
var thisIndex = $(this).index();
//判断当前点击的焦点索引与现在显示图片的索引关系
//当点击的焦点索引 大于 现在显示图片的索引时
if(thisIndex > index){
$('#banner>ul li').eq(index).animate({left:'-500px'});
$('#banner>ul li').eq(thisIndex).css({left:'500px'});
$('#banner>ul li').eq(thisIndex).animate({left:'0px'});
index = thisIndex;
focus();
//当点击的焦点索引 小于 现在显示图片的索引时
}else if(thisIndex < index){
$('#banner>ul li').eq(index).animate({left:'500px'});
$('#banner>ul li').eq(thisIndex).css({left:'-500px'});
$('#banner>ul li').eq(thisIndex).animate({left:'0px'});
index = thisIndex;
focus();
}
});
//播放函数，主要是为了自动播放的调用
function play(){
$('#banner>ul li').eq(index).animate({left:'-500px'});
index++;
if(index == $('#banner>ul li').length){
index = 0;
$('#banner>ul li').eq(index).css({left:'500px'});
}
$('#banner>ul li').eq(index).css({left:'500px'});
$('#banner>ul li').eq(index).animate({left:'0px'});
focus();
}
//定义一个值为null的全局变量
var timer = null;
//自动播放函数
function autoPlay(){
timer = setInterval(play,1000);
}
//添加鼠标移入轮播图容器时，自动播放停止
$('#banner').bind('mouseover',function(){
clearInterval(timer);
timer = null;
});
//添加鼠标移出轮播图容器时，自动播放继续
$('#banner').bind('mouseout',function(){
autoPlay();
});
//添加一个状态当为true时，可以点击，false时点击无效，这样可以防止多次点击按钮获得更好的客户体验，
var statu = true;
$('#banner .prev').click(function(){
if(statu == true){
// 给状态值改为false
statu = false;
//当前图片滑向右边，全局索引index减1
$('#banner>ul li').eq(index).animate({left:'500px'});
index--;
//判断此时全局索引是否为或者小于最小索引值，是，则使全局索引值改为最大索引值，
if(index < 0){
index = $('#banner>ul li').length-1;
}
//将改变后的全局索引所对应的图片用css()方法将其“拉”回，最左边。然后用animate()方法滑向当前可视区域(容器区域内)
$('#banner>ul li').eq(index).css({left:'-500px'});
//动画完成后将状态值改为true，以便下一次的点击
$('#banner>ul li').eq(index).animate({left:'0px'},function(){statu = true;});
focus();
}
});
$('#banner .next').click(function(){
if(statu == true){
// 给状态值改为false
statu = false;
//当前图片滑向左边，全局索引index加1
$('#banner>ul li').eq(index).animate({left:'-500px'});
index++;
//判断此时全局索引是否大于最大索引值（最大索引值是$('#banner>ul li').length-1 ），是，则使全局索引值改为最大索引值，
if(index == $('#banner>ul li').length){
index = 0;
}
//将改变后的全局索引所对应的图片用css()方法将其“拉”回最右边。然后用animate()方法滑向当前可视区域(容器区域内)
$('#banner>ul li').eq(index).css({left:'500px'});
//动画完成后将状态值改为true，以便下一次的点击
$('#banner>ul li').eq(index).animate({left:'0px'},function(){statu = true;});
focus();
}
})
//页面打开时，默认调用自动轮播函数
autoPlay();
});
3、注意
记得要引入jq，否则无法运行
