從這一章節開始，我將會為大家陸續的介紹利用Jquery完成特效動畫。先來看看這一節所介紹的特效：傳統輪播。
一、需求分析
1. 提供很多尺寸相等的圖片，一排緊挨著顯示。
2. 左右有兩個切換按鈕，用來控制顯示上一張還是下一張。
3. 右下方有指示器"小圈圈"，用來提示顯示到第幾個圖片；也可以點擊它，進行圖片的切換。
4. 每隔一個固定的時間，圖片會自動滾動。
5. 當鼠標放到圖片上面的時候，會停止自動滾動；當鼠標離開后，再經過固定間隔時間后，又會自動播放。
二、代碼剖析
1. 用html代碼搭建框架
<body> <div id="container"> <ul id="content"> <li><a href="#"><img src="images/0.jpg"/></a></li> <li><a href="#"><img src="images/1.jpg"/></a></li> <li><a href="#"><img src="images/2.jpg"/></a></li> <li><a href="#"><img src="images/3.jpg"/></a></li> <li><a href="#"><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); }); 精彩專題分享：jQuery圖片輪播 JavaScript圖片輪播 Bootstrap圖片輪播
至此，一個傳統輪播的效果就實現了，希望大家可以學以致用。
新聞熱點
疑難解答
