怎樣製作輪播圖

電腦
關注：2.54W次

輪播圖在網頁中經常見到，視覺效果也是很不錯的，今天咪咪我就來分享怎樣使用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>