圖片輪播之：靜若處子，動若脫兔（為什麼我不來寫一篇關於圖片輪播的部落格呢？）...
一、閒聊：
圖片輪播，一個你再熟悉不過的小東西了。或許在你剛開始學習web的時候就能做出來得到效果。但是你會發現當面對不同的需求的時候又要重新寫一個輪播。很是麻煩的對吧。LZ也是這樣學習過來的，發現自己寫的很多輪播的思路都不一樣了。這次寫出的下一次也許就寫不出來了，或者說是用更好的方式來實現了。下面一起來總結下都有什麼樣的需求。
二、需求：
1） 首先是要能迴圈顯示出來（不考慮迴圈效果）。
2）滑鼠移到圖片上時停止切換，移開之後又自動開始迴圈。
3）帶有圖片標記，兩個作用（1、可以給使用者提示一共多少張，2、可以知道當前展示得到是第幾張
4）帶有切換按鈕，當用按鈕點選的時候就取消自動迴圈。讓使用者自由操作（切換按鈕需要以上後出現，移開消失）。
三、思路：
以前再最開始的時候做輪播是直接改變的圖片 url 地址，但是現在不能這樣做了。為什麼？因為沒當變化一下url地址瀏覽器就會發送一個請求道伺服器區拉取這個圖片，這樣對於效能來說是很不好的。所以不能這樣做。Now 那就通過移動圖片吧。我的思路（也是在借鑑的基礎上）將所有的圖片聯合成一副大的圖片，這樣只需要移動一副大的圖片就可以實現輪播了。下面一起來看看怎樣實現吧！
四、實現步驟：
HTML：
<!--picture-loop-wrapper-->
<divclass="picture-loop-wrapper">//外部迴圈顯示盒子
<ulclass="imgBox">//組合長圖盒子
<liid="img1"><ahref="#"><imgsrc="img/1.jpg"></a></li>
<liid="img2"><ahref="#"><imgsrc="img/2.jpg"></a></li>
<liid="img3"><ahref="#"><imgsrc="img/3.jpg"></a></li>
<liid="img4"><ahref="#"><imgsrc="img/4.jpg"></a></li>
<liid="img5"><ahref="#"><imgsrc="img/5.jpg"></a></li>
</ul>
<divclass="currentNum">//顯示標記盒子
<spanclass="imgNummark-color"></span>
<spanclass="imgNum"></span>
<spanclass="imgNum"></span>
<spanclass="imgNum"></span>
<spanclass="imgNum"></span>
</div>
<divclass="controlto-left"><imgsrc="img/left-arrow.png"/></div>//切換按鈕組
<divclass="controlto-right"><imgsrc="img/right-arrow.png"/></div>
</div> 分析：首先是外部的（picture-loop-wrapper）一個顯示的盒子，控制顯示的視窗大小。裡面的 ul 這個就是把所有的圖片組合起來作為一張長圖。
CSS：
ul{
margin:0;//消除自帶的間距
padding:0;
}
/*picture-loop-wrapper*/
.picture-loop-wrapper{//外部顯示區域
position:relative;
width:520px;
height:280px;
overflow:hidden;/*這裡很重要，控制顯示的範圍*/
}
.imgBox{
position:absolute;//這裡因為後面使用的是left屬性
width:2600px;/*組合長圖，因為我是5張圖，每張520px，所以長圖就是5*520=2600px*/
list-style-type:none;
}
.imgBox>li{
float:left;/*實現一排顯示，因為li是塊元素，所以採取浮動*/
width:520px;
}
.imgBoxa{
display:inline-block;/*這裡是為了避免懸空，因為a是內聯元素不會被撐開*/
}
.control{
position:absolute;/*絕對與wrapper盒子定位，實現在上面浮動*/
top:50%;
margin-top:-20px;/*錘子居中*/
left:20px;
background:#000;
opacity:.3;
text-align:center;
width:40px;
height:40px;
display:none;
cursor:pointer;
}
.controlimg{
margin-top:8px;/*圖片居中*/
}
.control:hover{
opacity:.8;
}
.to-right{
left:450px;
}
/*currentNum*/
.currentNum{
position:absolute;
left:50%;
top:250px;
margin-left:-35px;
width:70px;
height:11px;
}
/*spanNum*/
.imgNum{
display:inline-block;
float:left;
width:9px;
height:9px;
margin-right:4px;
border-radius:9px;
background:#b7b7b7;
cursor:pointer;
}
.mark-color{
background:#f40;
} 分析：css程式碼沒什麼可說的，主要就是注意 定位的使用。補充（在Position屬性值為absolute的同時，如果有一級父物件（無論是父物件還是祖父物件，或者再高的輩分，一樣）的Position屬性值為Relative時，則上述的相對瀏覽器視窗定位將會變成相對父物件定位，這對精確定位是很有幫助的。）和 overflow 的使用。
JS:
$(document).ready(function(){
var$iBox=$('.imgBox'),
$iNum=$('.imgNum'),//快取優化
indexImg=1,//初始下標
totalImg=5,//圖片總數量
imgSize=520,//圖片尺寸寬度
moveTime=1100,//切換動畫時間
setTime=2500,//中間暫停時間
clc=null;
functionmoveImg(){
if(indexImg!=totalImg){
$iBox.animate({
left:-(indexImg*imgSize)+'px'
},moveTime);
$iNum.removeClass('mark-color')
.eq(indexImg)
.addClass('mark-color');
indexImg++;
}
else{
indexImg=1;
$iNum.removeClass('mark-color')
.eq(indexImg-1)
.addClass('mark-color');
$iBox.animate({
left:0
},moveTime);
}
}
$iNum.hover(function(){//滑鼠放在下方標記上面
$iBox.stop();//結束當前動畫
clearInterval(clc);//暫停迴圈
$iNum.removeClass('mark-color');
$(this).addClass('mark-color');
indexImg=$(this).index();
$iBox.animate({
left:-(indexImg*imgSize)+'px'
},500);
},function(){
clc=setInterval(moveImg,setTime);
});
//滑鼠放在圖片上停止動畫
$iBox.hover(function(){
$('.control').fadeIn(200);//出現切換按鈕
clearInterval(clc);//暫停迴圈
},function(){
$('.control').hide();//隱藏切換
clc=setInterval(moveImg,setTime);
});
//顯示左右
$('.control').hover(function(){//放在切換按鈕上停止動畫和迴圈
clearInterval(clc);
$('.control').show();
//returnfalse;允許傳播
});
//向右邊前進
$('.to-right').click(function(){
if(indexImg!=totalImg){
$iBox.animate({
left:-(indexImg*imgSize)+'px'
},moveTime);
$iNum.removeClass('mark-color')
.eq(indexImg)
.addClass('mark-color');
indexImg++;
}
else{
indexImg=1;
$iNum.removeClass('mark-color')
.eq(indexImg-1)
.addClass('mark-color');
$iBox.animate({
left:0
},moveTime);
}
});
//向左邊前進
$('.to-left').click(function(){
indexImg--;//下標減一
if(indexImg!=0){
$iBox.animate({
left:-((indexImg-1)*imgSize)+'px'
},moveTime);
$iNum.removeClass('mark-color')
.eq((indexImg-1))
.addClass('mark-color');
}
else{
indexImg=totalImg;
$iNum.removeClass('mark-color')
.eq(indexImg-1)
.addClass('mark-color');
$iBox.animate({
left:-((indexImg-1)*imgSize)+'px'
},moveTime);
}
});
clc=setInterval(moveImg,setTime);//自動迴圈圖片切換
});示意圖：
這裡對js程式碼做點說明： 基本引數是可以隨意改動的。就在最上面的初始。css程式碼和js程式碼都可以很好的相容。勇氣來也很方便。
五、總結：
這個例子能做到上面的所有需求，但是有一個問題就是： 當最後一張的時候它會又重新到第一張。如果你不喜歡這樣的話，那麼沒關係。我已經做出來了，一直向前不回到第一張的例子。下面會繼續寫出來的。（發現用這個寫部落格真心不好寫啊，有些不好說。很簡單，但是又很關鍵的。不過應該思路你是明白了。值了！）
效果演示：http://www.jiuni.com.cn/myworks/picture-loop/index.html
（本篇完）
轉載於:https://my.oschina.net/leipeng/blog/224432