在國(guó)外的網(wǎng)站看到一個(gè)很不錯(cuò)的圖片自動(dòng)展示效果，于是就自己做了起來，在查看代碼時(shí)發(fā)現(xiàn)是一個(gè)JavaScript愛好者自己寫了一個(gè)庫(kù)文件來調(diào)用，確實(shí)看的不太懂，但效果是做出來了，頁(yè)面的調(diào)用代碼只需引用固定的JS文件和CSS文件，然后用戶可以自己定義展示的圖片。

頁(yè)面調(diào)用代碼如下:

--表頭引用的CSS文件和JS文件
<head?runat="server">
<title>無標(biāo)題頁(yè)</title>
<link?rel="stylesheet"?href="backbox.css"?type="text/css"?/>
<script?type="text/javascript"?src="js/prototype.compressed.js"></script>
<script?type="text/javascript"?src="js/scriptaculous.js?load=effects"></script>
<script?type="text/javascript"?src="js/lightbox.js"></script>
<script?type="text/javascript"?src="js/dhtmlHistory.js"></script>
<script?type="text/javascript"?src="js/customsignsheader.js"></script>
</head>

--頁(yè)面調(diào)用代碼(其實(shí)中主要展示是一個(gè)Div層的效果)
<div>
<div?onclick="dhtmlHistory.add('location1',{message:?'backbox'});countdown()">
<a?href="images/babyhand.jpg"?rel="lightbox[slide]"?caption="A?Bunch?of?Grapes">
<img?src="images/sunset.jpg"?alt="lime"?width="400"?height="300"?border="0"?/></a>
</div>
<a?href="images/desert.jpg"?rel="lightbox[slide]"?caption="Sunflower"></a>
<a?href="images/beech.jpg"?rel="lightbox[slide]"?caption="Dolphin"></a>
<a?href="images/lime.jpg"?rel="lightbox[slide]"?caption="Waterfall"></a>
</div>

--最后引用的庫(kù)文件
<script?type="text/javascript"?src="js/customsignsfooter.js"></script>

?

演示完整的代碼DEMO下載地址: http://good.gd/159245.htm

?

?

總結(jié)

以上是生活随笔為你收集整理的做出的一个图片的自动展示效果(JS版本)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。