本人錄制技術視訊位址：https://edu.csdn.net/lecturer/1899 歡迎觀看。
從這一章節開始，我将會為大家陸續的介紹利用Jquery完成特效動畫。先來看看這一節所介紹的特效：傳統輪播。
一、需求分析
1. 提供很多尺寸相等的圖檔，一排緊挨着顯示。
2. 左右有兩個切換按鈕，用來控制顯示上一張還是下一張。
3. 右下方有訓示器"小圈圈"，用來提示顯示到第幾個圖檔；也可以點選它，進行圖檔的切換。
4. 每隔一個固定的時間，圖檔會自動滾動。
5. 當滑鼠放到圖檔上面的時候，會停止自動滾動；當滑鼠離開後，再經過固定間隔時間後，又會自動播放。
二、代碼剖析
1. 用html代碼搭建架構
<body>
<div id="container">
<ul id="content">
<li><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" ><img src="images/0.jpg"/></a></li>
<li><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" ><img src="images/1.jpg"/></a></li>
<li><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" ><img src="images/2.jpg"/></a></li>
<li><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" ><img src="images/3.jpg"/></a></li>
<li><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" ><img src="images/4.jpg"/></a></li>
</ul>
<div id="btn">
<div id="leftBtn"></div>
<div id="rightBtn"></div>
</div>
<ul id="indicator">
<li class="current"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
1> id為container的div，是整個輪播效果的容器。
2> id為content的ul，裡面存放的内容就是界面上面顯示的滾動的圖檔。
3> id為btn的div，裡面的兩個子元素就是用來切換上一張還是下一張的按鈕。
4> id為indicator的ul，用來顯示訓示器。
2. CSS代碼改變顯示樣式
1> 下面兩句代碼，清除掉浏覽器預設的間隙。
*{margin: 0; padding: 0;}
2> 設定父容器的樣式。
#container
{
width:560px;
height: 300px;
margin: 100px auto;
position: relative;
overflow: hidden;
}
由于顯示的圖檔大小就是 560 X 300, 是以這裡的父容器的大小也設定這麼大，這裡設定的margin，就是讓父容器水準居中，垂直距離頂部100px，overflow表示如果顯示的子元素超出了container的範圍，就隐藏掉(注：由于顯示的圖檔是一排顯示的，如果不加上overflow: hidden這個屬性的話，就露餡了，去掉這個屬性的話，效果如下：)。
也就是說，如果不加上overflow: hidden 這個屬性的話，所有的圖檔就會一排全部顯示出來了。
最後一個就是定位屬性 position: relative; 由于container是父容器，是以應該設定為relative，而它的所有的子元素要進行絕對定位的話，他們的position應該設定為absolute。這就是所謂的 "子絕父相" 原則。在絕對定位中都這麼使用。
3> 設定content的樣式
#container #content
{
list-style: none;
width: 10000px;
position: absolute;
left:0;
top:0;
}
#container #content li
{
float:left;
}
#container #content li img
{
border: 0;
}
注意到，content的width屬性設定為了10000px，這是為了保證它能夠存放足夠多的圖檔。預設情況下，content中所有的li是塊級元素，也就是他們會上下排列；是以加了一句float:left；讓他們左右排列。而父級元素container設定了overflow: hidden, 是以這些左右排列的圖檔隻能看到第一個。
4> 設定左右切換按鈕的樣式
#container #leftBtn
{
position: absolute;
width:45px;
height: 45px;
top:108px;
left: 20px;
background: url(images/icons.png) no-repeat 0 0;
cursor: pointer;
}
#container #rightBtn
{
position: absolute;
width:45px;
height: 45px;
top:108px;
right: 20px;
background: url(images/icons.png) no-repeat 0 -45px;
cursor: pointer;
}
注意到，在擷取左右按鈕的時候，他們是取自同一張圖檔icons.png。隻是圖檔截取的位置不一緻，這就是所謂的"精靈"。就是為了減小圖檔占用大小，而把很多的小icon放置在一張圖檔上面，然後通過定位截取的辦法，擷取想要的部分。（注：關于怎樣定位icon？ 1. 寫代碼慢慢調節；2. 用精靈裁切定位軟體，如：CSS Sprites等）。圖檔設計大緻如下：
這張圖檔中，不僅包含了左右切換按鈕，訓示器的按鈕也一并給出了，是以在書寫訓示器按鈕的css代碼時候，同樣也可以使用這張圖檔。
4> 設定訓示器的樣式
#container #indicator
{
position: absolute;
right: 50px;
list-style: none;
bottom: 12px;
}
#container #indicator li
{
float: left;
cursor: pointer;
margin-left: 20px;
width:14px;
height: 14px;
background: url(images/icons.png) no-repeat -23px -127px;
}
#container #indicator li.current
{
background-position: -9px -125px;
}
代碼中 #indicator li 設定的background的圖檔就是上圖中空心的小圓圈，而 #indicator li.current 設定的background的圖檔就是上圖中實心的大圓圈。是以剛開始的時候，預設選中第一個。
3. 用JQuery添加互動效果
1> 切換下一張(點選右邊按鈕)
$(function(){
// 總的圖檔個數(用代碼擷取個數，擴充性比較強)
var totalCount = $("#container #content li").length;
// 目前處于第幾個圖檔
var nowImage = 0;
$("#container #btn #rightBtn").click(rightBtnClick);
<span style="white-space:pre"> </span>function rightBtnClick(){
if(!$("#container #content").is(":animated")){
if(nowImage == totalCount - 1){
<span style="white-space:pre"> </span>nowImage = 0;
<span style="white-space:pre"> </span>$("#container #indicator li").eq(nowImage).addClass("current").siblings().removeClass("current");
<span style="white-space:pre"> </span>$("#container #content").animate({"left": -560 * (totalCount -1 )}, 1000, function(){
$("#container #content").css("left",0);
});
} else {
nowImage++;
changeImage();
}
}
}
});
changeImage 函數
function changeImage(){
if(!$("#container #content").is(":animated")){
<span style="white-space:pre"> </span>$("#container #content").animate({"left": -560 * nowImage}, 1000);
$("#container #indicator li").eq(nowImage).addClass("current").siblings().removeClass("current");
}
}
代碼中，當DOM元素加載完畢，就執行了$('#container #btn #rightBtn').click(rightClick), 也就是立刻執行了切換圖檔操作。在rightBtnClick函數中，先進行了content是否正在進行動畫的判斷，這樣做的目的：防止動畫在執行的過程，使用者又進行強制的執行其他動畫，會産生幹擾，最終導緻動畫效果混亂。
如果有的話，則将标志變量nowImage指向下一個圖檔，并且執行changeImage函數中的代碼：1. 将content中的所有圖檔左移一個圖檔大小的寬度；2.将訓示器的圖檔也移動到對應的位置。
如果沒有的話，并且圖檔現在是顯示到了最後一個，則先執行動畫，執行完畢後，立刻将content中所有的圖檔内容拉回到第一個，但是這裡任然會穿幫，因為目前圖檔顯示為最後一個後，你繼續執行動畫，是沒有任何效果的，是以在這個動畫執行期間是沒有任何反應的，當動畫時間執行完畢後，會突然在界面上出現第一個圖檔。
設計思想：為了解決這個問題，解決方案就是在這些圖檔之後追加一個與第一張相同的圖檔；這就是傳統輪播的主要設計思想。是以當圖檔滾動到倒數第二章的時候；首先執行滾動動畫，也就是滾動到預先準備的與第一張一模一樣的圖檔，看起來似乎是滾動到了第一張，其實不然。在動畫執行完畢後，立刻将content中所有的圖檔拉回到第一張。流程圖如下：
是以此刻修改一點代碼，在代碼的開頭追加第一張圖檔
/*克隆輪播的第一個li追加到最後*/
$("#container #content li").first().clone().appendTo($("#container #content"));
在rightBtnClick代碼中，将nowImage == totalCount - 1 修改為 nowImage == totalCount - 2。
2> 切換上一張(點選左邊按鈕)
代碼與點選右邊按鈕類似
$("#container #btn #leftBtn").click(function(){
if(!$("#container #content").is(":animated")){
if(nowImage == 0){
nowImage = totalCount - 2;
$("#container #content").css("left",-560 * (totalCount - 1));
$("#container #indicator li").eq(nowImage).addClass("current").siblings().removeClass("current");
$("#container #content").animate({"left": -560 * nowImage}, 1000);
} else {
nowImage--;
changeImage();
}
}
});
3> 點選訓示器按鈕進行圖檔切換
它的設計思路，就是擷取圖檔的索引，然後調用changeImage函數就可以了。
$("#container #indicator li").click(function(){
nowImage = $(this).index();
changeImage();
});
4> 添加定時執行動畫的功能
也就是定時的調用點選右邊按鈕的代碼；添加如下代碼:
var timer = setInterval(rightBtnClick, 2000);
5> 滑鼠懸停在圖檔上，停止滾動；滑鼠離開圖檔後，繼續滾動
也就是對定時器進行開啟和關閉；添加如下代碼:
$("#container").mouseenter(function(){
clearInterval(timer);
}).mouseleave(function(){
timer = setInterval(rightBtnClick, 2000);
});
至此，一個傳統輪播的效果就實作了。