上回埋下的伏筆今天來補上，前兩個輪播圖顯然不太好用（但是在一些場景下還是可以用的，比如不需要焦點的左右輪播，可以用輪播圖（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，否則無法運行
