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

頁面調用代碼如下:

--表頭引用的CSS文件和JS文件
<head?runat="server">
<title>無標題頁</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>

--頁面調用代碼(其實中主要展示是一個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>

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

?

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

?

?

總結

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

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