jQuery實現HTML5的幻燈片特效,使用支持HTML5的浏覽器會有特殊效果。
不支持HTML5的浏覽器也能夠正常運行,只是沒有顏色特效。
效果體驗:
http:///keleyi/phtml/html5/1.htm
完整代碼:
<!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>jQuery HTML5的幻燈片特效-</title>
<script type="text/javascript" src="http:///keleyi/pmedia/jquery-1.9.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="http:///keleyi/phtml/html5/1/styles.css" />
</head>
<body>
<div>使用支持HTML5的浏覽器會有特殊效果 <a href="http:///a/bjac/b8i3xdui.htm" target="_blank">原文</a></div>
<div id="slideshow">
<ul class="slides">
<li><img src="http:///keleyi/phtml/html5/1/1.jpg" width="620" height="320" alt="Marsa Alam underawter close up" /></li>
<li><img src="http:///keleyi/phtml/html5/1/2.jpg" width="620" height="320" alt="Turrimetta Beach - Dawn" /></li>
<li><img src="http:///keleyi/phtml/html5/1/3.jpg" width="620" height="320" alt="Power Station" /></li>
<li><img src="http:///keleyi/phtml/html5/1/4.jpg" width="620" height="320" alt="Colors of Nature" /></li>
</ul>
<span class="arrow previous"></span>
<span class="arrow next"></span>
</div>
<script type="text/javascript" src="http:///keleyi/phtml/html5/1/script.js"></script>
</body>
</html>