DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery常見問題 >> jquery圖片上下自動或箭頭控制滾動
jquery圖片上下自動或箭頭控制滾動
編輯:JQuery常見問題     
先體驗效果:http:///keleyi/phtml/image/5.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圖片上下箭頭滾動切換-</title><base target="_blank" />
<meta name="description" content="jquery全屏焦點圖片滾動,圖片上下滾動通過設置上下按鈕來控制圖片上下滾動,支持圖片暫停和輪播的焦點圖片滾動。" />
<link href="5/fullfoucs..css" rel="stylesheet" />
<script src="http:///keleyi/pmedia/jquery-1.10.1.min.js" type="text/javascript"></script>
<script src="http:///keleyi/phtml/image/5/jquery.fullfoucs..js" type="text/javascript"></script>
</head>
<body>
<div class="frame_keleyi_com">
<div class="scroll_keleyi_com">
<div id="flash_control">
<div class="flash-control-wrp">
<a class="icon-up"><i></i></a>
<a class="icon-play"><i></i></a>
<a class="icon-pause"><i></i></a>
<a class="icon-down"><i></i></a>
</div>
</div>
<ol id="index_ex_slide" class="flash">
<li class="default"><a href="http:///a/bjac/532bedbffca1affa.htm" title="單行文字間歇向上滾動,放上光標就停,移開繼續滾動"><img src="http:///keleyi/phtml/image/img/bmw_m1_hood.jpg" alt="" /></a></li>
<li><a href="http:///dev/453467666cab56d0.htm" title="jquery圖片輪播切換"><img src="http:///keleyi/phtml/image/img/viper_1.jpg" alt="" /></a></li>
<li><a href="http:///a/bjac/141932b419e08101.htm" title="jquery使用ColorBox彈出圖片組浏覽層"><img src="http:///keleyi/phtml/image/img/bmw_m3_gt.jpg" alt="" /></a></li>
<li><a href="http:///a/bjac/gucmqug3.htm" title="原文"><img src="http:///keleyi/phtml/image/img/viper_corner.jpg" alt="" /></a></li>
</ol>
</div>
</div>
<script type="text/javascript">
$.fullFoucs({
direction: 'down'
});
</script>


<div style="background-color:Red; width:100%;height:150px;">歡迎</div>
<div style="background-color:Yellow; width:100%;height:150px;">hi</div>
<div style="background-color:Silver; width:100%;height:150px;"></div>
<div style="background-color:Aqua; width:100%;height:150px;"></div>
<div style="background-color:Fuchsia; width:100%;height:150px;">keleyi</div>
<div style="background-color:Green; width:100%;height:150px;"></div>
<div style="background-color:Blue; width:100%;height:150px;"></div>
<div style="background-color:Olive; width:100%;height:150px;"> 返回頂部</div>
<div style="background-color:Green; width:100%;height:150px;">A</div>
<div style="background-color:Purple; width:100%;height:150px;">jquery</div>
<div style="background-color:Green; width:100%;height:150px;"><a href="http:///a/bjac/3n8d6g5f.htm">jstree樹形菜單</a></div>
<div style="background-color:Lime; width:100%;height:150px;"></div>
<div style="background-color:Orange; width:100%;height:150px;">完整代碼</div>
</body>
</html>
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved