本文旨在引導大家自已動手書寫圖片輪播效果，通過使用jQuery來製作圖片輪播效果是多麼的簡單，而不必書寫大量js程式碼。
跟我來吧！
3
選擇所有圖片，格式選單－〉列表－〉專案列表，製作一個圖片列表
4
然後再插入一個div，id命名為「LunBoNum」，在div內寫入程式碼如下：<span class="CurrentNum">1</span><span>2</span><span>3</span><span>4</span><span>5</span>5
插入一個新id為「LunBo」的div，並包含如上全部內容，程式碼如下：<div class="LunBo"> <ul> <li class="CurrentPic"><img src="images/1.png" width="490" height="170"></li> <li><img src="images/2.jpg" width="490" height="170"></li> <li><img src="images/3.jpg" width="490" height="170"></li> <li><img src="images/4.jpg" width="490" height="170"></li> <li><img src="images/5.png" width="490" height="170"></li> </ul> <div class="LunBoNum"> <span class="CurrentNum">1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> </div></div>CurrentNum">1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> </div></div>6
在網頁的<head></head>程式碼間加入jQuery框架連結<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>7
編寫JS程式碼如下<script type="text/javascript" language="javascript">var PicTotal = 5;// 當前圖片總數var CurrentIndex;// 當前滑鼠點選圖片索引var ToDisplayPicNumber = 0;// 自動播放時的圖片索引$("div.LunBo div.LunBoNum span").click(DisplayPic);function DisplayPic() {// 測試是父親的第幾個兒子CurrentIndex = $(this).index();// 刪除所有同級兄弟的類屬性$(this).parent().children().removeClass("CurrentNum")// 為當前元素新增類$(this).addClass("CurrentNum");// 隱藏全部圖片var Pic = $(this).parent().parent().children("ul");$(Pic).children().hide();// 顯示指定圖片$(Pic).children("li").eq(CurrentIndex).show();}function PicNumClick() {$("div.LunBo div.LunBoNum span").eq(ToDisplayPicNumber).trigger("click");ToDisplayPicNumber = (ToDisplayPicNumber + 1) % PicTotal;setTimeout("PicNumClick()",1000);}setTimeout("PicNumClick()",1000);</script>ent().parent().children("ul");$(Pic).children().hide();// 顯示指定圖片$(Pic).children("li").eq(CurrentIndex).show();}function PicNumClick() {$("div.LunBo div.LunBoNum span").eq(ToDisplayPicNumber).trigger("click");ToDisplayPicNumber = (ToDisplayPicNumber + 1) % PicTotal;setTimeout("PicNumClick()",1000);}setTimeout("PicNumClick()",1000);</script>8
連結CSS檔案，檔案內容如下* {margin: 0px;padding: 0px;font-size: 14px;}div.LunBo {position: relative;list-style-type: none;height: 170px;width: 490px;}div.LunBo ul li {position: absolute;height: 170px;width: 490px;left: 0px;top: 0px;display: none;}div.LunBo ul li.CurrentPic {display: block;}div.LunBo div.LunBoNum {position: absolute;left: 374px;bottom: 11px;width: 83px;text-align: right;background-color: #999;padding-left: 10px;}div.LunBo div.LunBoNum span {height: 20px;width: 15px;display: block;line-height: 20px;text-align: center;margin-top: 5px;margin-bottom: 5px;float: left;cursor: pointer;}div.LunBo div.LunBoNum span.CurrentNum {background-color: #3F6;}0px;}div.LunBo div.LunBoNum span {height: 20px;width: 15px;display: block;line-height: 20px;text-align: center;margin-top: 5px;margin-bottom: 5px;float: left;cursor: pointer;}div.LunBo div.LunBoNum span.CurrentNum {background-color: #3F6;}10
最後附上全部程式碼<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>圖片輪播演示</title><script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script><style type="text/css">* {margin: 0px;padding: 0px;font-size: 14px;}div.LunBo {position: relative;list-style-type: none;height: 170px;width: 490px;}div.LunBo ul li {position: absolute;height: 170px;width: 490px;left: 0px;top: 0px;display: none;}div.LunBo ul li.CurrentPic {display: block;}div.LunBo div.LunBoNum {position: absolute;left: 374px;bottom: 11px;width: 83px;text-align: right;background-color: #999;padding-left: 10px;}div.LunBo div.LunBoNum span {height: 20px;width: 15px;display: block;line-height: 20px;text-align: center;margin-top: 5px;margin-bottom: 5px;float: left;cursor: pointer;}div.LunBo div.LunBoNum span.CurrentNum {background-color: #3F6;}</style></head><body><div class="LunBo"> <ul> <li class="CurrentPic"><img src="images/1.png" width="490" height="170"></li> <li><img src="images/2.jpg" width="490" height="170"></li> <li><img src="images/3.jpg" width="490" height="170"></li> <li><img src="images/4.jpg" width="490" height="170"></li> <li><img src="images/5.png" width="490" height="170"></li> </ul> <div class="LunBoNum"> <span class="CurrentNum">1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> </div></div><script type="text/javascript" language="javascript">var PicTotal = 5;var CurrentIndex;var ToDisplayPicNumber = 0;$("div.LunBo div.LunBoNum span").click(DisplayPic);function DisplayPic() {// 測試是父親的第幾個兒子CurrentIndex = $(this).index();// 刪除所有同級兄弟的類屬性$(this).parent().children().removeClass("CurrentNum")// 為當前元素新增類$(this).addClass("CurrentNum");// 隱藏全部圖片var Pic = $(this).parent().parent().children("ul");$(Pic).children().hide();// 顯示指定圖片$(Pic).children("li").eq(CurrentIndex).show();}function PicNumClick() {$("div.LunBo div.LunBoNum span").eq(ToDisplayPicNumber).trigger("click");ToDisplayPicNumber = (ToDisplayPicNumber + 1) % PicTotal;setTimeout("PicNumClick()",1000);}setTimeout("PicNumClick()",1000);</script></body></html>以上程式碼儲存為html檔案後可直接執行。LunBo ul li.CurrentPic {display: block;}div.LunBo div.LunBoNum {position: absolute;left: 374px;bottom: 11px;width: 83px;text-align: right;background-color: #999;padding-left: 10px;}div.LunBo div.LunBoNum span {height: 20px;width: 15px;display: block;line-height: 20px;text-align: center;margin-top: 5px;margin-bottom: 5px;float: left;cursor: pointer;}div.LunBo div.LunBoNum span.CurrentNum {background-color: #3F6;}</style></head><body><div class="LunBo"> <ul> <li class="CurrentPic"><img src="images/1.png" width="490" height="170"></li> <li><img src="images/2.jpg" width="490" height="170"></li> <li><img src="images/3.jpg" width="490" height="170"></li> <li><img src="images/4.jpg" width="490" height="170"></li> <li><img src="images/5.png" width="490" height="170"></li> </ul> <div class="LunBoNum"> <span class="CurrentNum">1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> </div></div><script type="text/javascript" language="javascript">var PicTotal = 5;var CurrentIndex;var ToDisplayPicNumber = 0;$("div.LunBo div.LunBoNum span").click(DisplayPic);function DisplayPic() {// 測試是父親的第幾個兒子CurrentIndex = $(this).index();// 刪除所有同級兄弟的類屬性$(this).parent().children().removeClass("CurrentNum")// 為當前元素新增類$(this).addClass("CurrentNum");// 隱藏全部圖片var Pic = $(this).parent().parent().children("ul");$(Pic).children().hide();// 顯示指定圖片$(Pic).children("li").eq(CurrentIndex).show();}function PicNumClick() {$("div.LunBo div.LunBoNum span").eq(ToDisplayPicNumber).trigger("click");ToDisplayPicNumber = (ToDisplayPicNumber + 1) % PicTotal;setTimeout("PicNumClick()",1000);}setTimeout("PicNumClick()",1000);</script></body></html>以上程式碼儲存為html檔案後可直接執行。
