DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery常見問題 >> jquery圖片播放切換左右控制
jquery圖片播放切換左右控制
編輯:JQuery常見問題     
點擊這裡查看效果
可自定義數字樣式和左右點擊按鈕

這個更好:
移入按鈕切換版本


更多圖片輪播

以下是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" />
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<style type="text/css">
*{padding:0; margin:0;}
</style>
<link type="text/css" rel="stylesheet" href="http:///keleyi/phtml/jqtexiao/10/jquery.pictrueScroll.css" />
<script type="text/javascript" src="http:///keleyi/phtml/jqtexiao/10/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http:///keleyi/phtml/jqtexiao/10/jquery.pictureScroll.js"></script>
<script type="text/javascript" >
$(function(){
$("#testScroll").pictrueScrollPlugin({'timeout':2000});
});
</script>
<title>jQ圖片播放切換左右控制-</title>
</head>

<body>
<div style="width:800px;margin:0px auto;"><h1>圖片播放切換控制</h1>
<div><a href="http:///a/bjac/bb5e7986.htm" target="_blank">原文</a></div>
</div>
<div class="pic_scroll_box" id="testScroll">
<ul>
<li><a><img src="http:///keleyi/phtml/jqtexiao/10/images/01.jpg" /></a></li>
<li><a><img src="http:///keleyi/phtml/jqtexiao/10/images/02.jpg" /></a></li>
<li><a><img src="http:///keleyi/phtml/jqtexiao/10/images/03.jpg" /></a></li>
<li><a><img src="http:///keleyi/phtml/jqtexiao/10/images/04.jpg" /></a></li>
<li><a><img src="http:///keleyi/phtml/jqtexiao/10/images/05.jpg" /></a></li>
</ul>
<div class="nums">
<span class="on"></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>

</div>
</body>
</html>
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved