此代碼為www.oioq.com所有，轉載請註明版權。轉載自wowbox blog (網頁設計知識庫)程序名：NultipleViewer
成果如下
支持多個幻燈片同時播放！
@author: Eays
@version: 1.0 無錯版
2008-10-7
繁體化：wowbox
使用要點：
1.multipleViewer.css 提供CSS佈局，必須。
2.multipleViewer.js multipleViewer主程序，必須。
3.jquery-1.2.6.pack.js jQuery框架，必須。
將html按照一定的格式排列，詳細格式在multipleViewer.js文件內有說明。
如何自適應高度和寬度？在幻燈片主體html代碼外增加一個層，定義這個層的高度和寬度，multipleViewer將自適應高度和寬度。
將html寫好後直接調用proxy方法將此層交給nultipleViewer代理。
html碼如下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>NultipleViewer</title>
<link href="multipleViewer.css" rel="stylesheet" rev="stylesheet" />
<script type="text/javascript" src="jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="multipleViewer.js"></script>
</head>
<body><div style="width:300px;height:500px;">
<div id="play333" class="play">
<span class="play_text"><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li></ul></span>
<p class="play_list">
<a href="#" target="_blank"><img src="01.jpg" title="" alt="" /></a>
<a href="#" target="_blank"><img src="02.jpg" title="" alt="" /></a>
<a href="#" target="_blank"><img src="03.jpg" title="" alt="" /></a>
<a href="#" target="_blank"><img src="04.jpg" title="" alt="" /></a>
<a href="#" target="_blank"><img src="05.jpg" title="" alt="" /></a>
<a href="#" target="_blank"><img src="06.jpg" title="" alt="" /></a>
</p>
</div><script type="text/javascript">
proxy("#play333");</script></div>
</body>
</html>
打包下載--點我--
0 意見:
張貼留言