好用的圖片輪播代碼

目前幾乎所有網站首頁面，都有一個圖片輪播廣告，對於宣傳網站和公司的活動非常有用，比如百度的首頁圖片輪播廣告如下:

650) this.width=650;" src="http://www.bkjia.com/uploads/allimg/131228/151K1J49-0.png" title="2013-09-16_140426.png" width="400" height="144" border="0" hspace="0" vspace="0" style="width:400px;height:144px;" />

圖片輪播的形式很多，我就以所示為例，說說如何在你的網站嵌入這樣的圖片輪播廣告。

650) this.width=650;" src="http://www.bkjia.com/uploads/allimg/131228/151K15554-1.png" title="2013-09-12_140834.png" width="150" height="217" border="0" hspace="0" vspace="0" style="width:150px;height:217px;" />

製作步驟如下(我已經在ie , ff, chrome 中測試完全相容):

① 下載原始碼 地址 : http://pan.baidu.com/share/link?shareid=2625869542&uk=456535632

② 將下載的zip檔案解壓,運行檔案index.htm 即可看到啟動並執行

650) this.width=650;" src="http://www.bkjia.com/uploads/allimg/131228/151K15554-1.png" title="2013-09-12_140834.png" width="150" height="217" border="0" hspace="0" vspace="0" style="width:150px;height:217px;" />

③ 在預設情況下輪播的圖片個數是5個, 如果你要增加圖片或是減少圖片請如下操作：

在解壓檔案夾中有一個檔案 xml/index.xml , 源碼如下:

<?xml version="1.0" encoding="utf-8"?><data speed="4" but="200,10" center="0"  rotundity="1,1,1,1" style="0" ><video imgURL="images/01.jpg" url="http://www.zcool.com.cn/"/><video imgURL="images/02.jpg" url="http://www.zcool.com.cn/"/><video imgURL="images/03.jpg" url="http://www.zcool.com.cn/"/><video imgURL="images/04.jpg" url="http://www.zcool.com.cn/"/><video imgURL="images/05.jpg" url="http://www.zcool.com.cn/"/></data>

說明:  <video imgURL="images/04.jpg" url="http://www.zcool.com.cn/"/> 就是一個輪詢的圖片，通過增加或者減少 <video imgURL="images/04.jpg" url="http://www.zcool.com.cn/"/> 代碼即可. 另外 <video imgURL="images/04.jpg" url="http://www.zcool.com.cn/"/> 中的url 就是你點擊該圖片後跳轉的新地址. 大家請看當我把 xml/index.xml 源碼修改成

<?xml version="1.0" encoding="utf-8"?><data speed="4" but="200,10" center="0"  rotundity="1,1,1,1" style="0" ><video imgURL="images/01.jpg" url="http://www.zcool.com.cn/"/><video imgURL="images/02.jpg" url="http://www.zcool.com.cn/"/><video imgURL="images/03.jpg" url="http://www.zcool.com.cn/"/></data>

後，啟動並執行效果是:

650) this.width=650;" src="http://www.bkjia.com/uploads/allimg/131228/151K11W8-3.png" title="2013-09-12_142253.png" width="150" height="200" border="0" hspace="0" vspace="0" style="width:150px;height:200px;" />

這裡我們發現輪播的圖片個數自動變成3了，非常方便.

④ 在預設情況片顯示的大小是寬270px, 高397px ,如果你要修改顯示圖片的大小，可以這樣修改. 找到 index.htm 檔案，源碼如下:

<div align="center">

<object

codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0"

width="298" height="217" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">

 <param name="movie" value="swf/Currencyshow.swf?data=xml/index.xml" />

 <param name="quality" value="high" />

 <param name="wmode" value="transparent" />

 <embed src=\'#\'" /Currencyshow.swf?data=xml/index.xml"

wmode="transparent" quality="high"

pluginspage="http://www.macromedia.com/go/getflashplayer"

type="application/x-shockwave-flash" width="270" height="397"></embed>

</object>

</div>

</body>

</html>

說明: 修改我標紅的兩個位置，輪播圖片的大小即可發生變化.

⑤ 如果控制輪播圖片的速度,還是修改 xml/index.xml 檔案，源碼如下:

<?xml version="1.0" encoding="utf-8"?><data speed="4" but="200,10" center="0"  rotundity="1,1,1,1" style="0" ><video imgURL="images/01.jpg" url="http://www.zcool.com.cn/"/><video imgURL="images/02.jpg" url="http://www.zcool.com.cn/"/><video imgURL="images/03.jpg" url="http://www.zcool.com.cn/"/></data>

說明: speed="4" 說明預設是4秒鐘自動播放下一個圖片.你可以根據需要自行修改.

說明: but="200,10" 是用來控製圖片數字顯示位置的,預設是在200,10這個座標上顯示,可以修改滿足你的需求.

650) this.width=650;" src="http://www.bkjia.com/uploads/allimg/131228/151K16251-4.png" title="2013-09-12_143309.png" />

感受： 該圖片輪播簡潔大方，形式清新。如果大家使用上有沒有問題，歡迎留言討論.