怎樣製作輪播圖
輪播圖在網頁中經常見到，視覺效果也是很不錯的，今天咪咪我就來分享怎樣使用jq外掛來製作輪播圖，一起來看看吧！
操作方法
（01）首先，安裝開啟好hbuilder，然後新建一個web專案，新建專案操作如圖所示。
（02）然後給新建的web專案起一個名字，點選“完成”按鈕就可以了。
（03）專案新建好之後，把要製作輪播圖的圖片，以及jq外掛放到相應的資料夾裡面，如圖，我就把圖片放在img資料夾，jq外掛放在js資料夾裡面。
（04）然後，點選index，開始書寫程式碼，製作輪播效果圖。
（05）如圖，像我這樣佈局，用一個div來巢狀ul和li以及img標籤。如圖，我是對兩張圖片進行輪播，所以需要第一個和最後一個圖片都是相同。
（06）接著清除樣式，比如margin，padding，list-style-type之類的。
（07）然後我們需要設定bannerimg的樣式，如圖，我設定它的寬高為600乘以200，因為我的圖片也是這個大小的。接著我們需要設定成相對定位，並且overflow為hidden，也就是溢位隱藏。
（08）設定好之後，其他圖片就會被隱藏，只看見第一張圖片。
（09）接著我們設定ul的寬度為9999px，這個只是慣用寫法，一般來說，ul的寬度必須大於所有圖片的寬度，比如我這裡有三張圖片，每張圖片的寬度為600px，所以ul必須大於1800px。然後設定ul為絕對定位，這樣ul就會以bannerimg為標準進行定位了。
（10）如圖，設定li的float屬性為left，表示左浮動。
（11）然後我們引入jQuery外掛，開始讓圖片動起來。
（12）如圖，定義一個變數，賦值為0，待會會用到它。
（13）然後我們設定一個定時器setInterval（），裡面有兩個引數，第一個引數表示執行的函式，第二個引數是執行時間，如圖所示，表示每隔2000毫秒就執行一次function（）{}，一直重複執行。
（14）之後，我們開始在function裡面設定動畫效果，如圖所示，runcount++表示自加一，然後如果runcount不大於2，就讓ul的位置往左移動，而如果當runcount大於2的時候，我們就把ul的位置設定為left：0.。這樣，輪播圖片就製作完成了。
（15）最後，放置輪播圖片原始碼給大家，儲存更換圖片以及路徑就可以了哦。<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><style type="text/css">*{margin: 0;padding: 0;list-style-type: none;}erimg{width: 600px;height: 200px;margin: 100px auto;border: 5px dashed red;overflow: hidden;position: relative;}ul{width: 1800px;position: absolute;left: 0;top: 0;}li{float: left;}</style><script src="js/"></script><script type="text/javascript">ad=function(){var runcount=0;setInterval(function(){runcount++;if(runcount>2){ runcount=1; $('ul')('left','0'); }$('ul')()ate({'left':-runcount*600},400);},2000);}</script></head><body><div class="bannerimg"><ul><li><img src="img/banner_1.png"/></li><li><img src="img/banner_2.png"/></li><li><img src="img/banner_1.png"/></li></ul></div></body></html>
特別提示
輪播圖涉及到的知識點比較多，要熟悉jQuery和定時器的使用以及定位的知識點才可以更快的製作出輪播圖。
