DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML5特效代碼 >> jQuery HTML5 幻燈片
jQuery HTML5 幻燈片
編輯:HTML5特效代碼     
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>
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved