滾動(dòng)圖片效果 jquery實(shí)現(xiàn)回旋滾動(dòng)效果
更新時(shí)間：2013年01月08日 09:27:12 作者：
jquery滾動(dòng)圖片效果,有些新手朋友可能不是很清楚，今天在網(wǎng)上找到一款回旋滾動(dòng)效果，拿出來和大家一起分享，感興趣的朋友可以了解下哦
今天在網(wǎng)上找到一款回旋滾動(dòng)效果，拿出來和大家一起分享。先上效果圖：
html 代碼：
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>jquery-roundabout</title>
<style type="text/css">
*{padding:0;margin:0;}
body{font:24px tahoma;}
ul{list-style:none;margin:100px auto 0;width:500px;height:200px;}
li{line-height:200px;height:200px;width:300px;background:#ccc;text-align:center;cursor:pointer;}
li.roundabout-in-focus{cursor:default;}
</style>
</head>
<body>
<ul class="roundabout">
<li>Block 1</li>
<li>Block 2</li>
<li>Block 3</li>
<li>Block 4</li>
<li>Block 5</li>
</ul>
</body>
</html>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.roundabout.min.js"></script>
<script type="text/javascript">
$(function(){
$('.roundabout').roundabout();
});
</script>
關(guān)于 roundabout.js 的代碼可以去官網(wǎng)上下載，這里就不寫了，太長了。點(diǎn)擊官網(wǎng)地址。
html 代碼：
復(fù)制代碼 代碼如下:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>jquery-roundabout</title>
<style type="text/css">
*{padding:0;margin:0;}
body{font:24px tahoma;}
ul{list-style:none;margin:100px auto 0;width:500px;height:200px;}
li{line-height:200px;height:200px;width:300px;background:#ccc;text-align:center;cursor:pointer;}
li.roundabout-in-focus{cursor:default;}
</style>
</head>
<body>
<ul class="roundabout">
<li>Block 1</li>
<li>Block 2</li>
<li>Block 3</li>
<li>Block 4</li>
<li>Block 5</li>
</ul>
</body>
</html>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.roundabout.min.js"></script>
<script type="text/javascript">
$(function(){
$('.roundabout').roundabout();
});
</script>
關(guān)于 roundabout.js 的代碼可以去官網(wǎng)上下載，這里就不寫了，太長了。點(diǎn)擊官網(wǎng)地址。
相關(guān)文章
ASP.NET中AJAX 調(diào)用實(shí)例代碼
最近在ASP.NET中做了一個(gè)AJAX調(diào)用 : Client端先從ASP.NET Server后臺(tái)取到一個(gè)頁面模板，然后在頁面初始化時(shí)再從Server中取一些相關(guān)數(shù)據(jù)以實(shí)現(xiàn)頁面模板的動(dòng)態(tài)顯示2012-05-05
jQuery 位置函數(shù)offset,innerWidth,innerHeight,outerWidth,outerHei
jQuery的位置函數(shù)(offset(),innerWidth(),innerHeight(),outerWidth(),outerHeight(),scrollTop(),scrollLeft())小應(yīng)用2010-03-03
jQuery實(shí)現(xiàn)的可編輯表格完整實(shí)例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的可編輯表格,結(jié)合完整實(shí)例形式分析了jQuery響應(yīng)鼠標(biāo)事件動(dòng)態(tài)操作頁面元素樣式與屬性的相關(guān)技巧,需要的朋友可以參考下2016-06-06
這篇文章主要介紹了jQuery層次選擇器用法,結(jié)合實(shí)例形式分析了jQuery針對(duì)頁面元素層級(jí)操作的層次選擇器使用技巧,需要的朋友可以參考下2016-09-09
jQuery實(shí)現(xiàn)動(dòng)態(tài)給table賦值的方法示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)動(dòng)態(tài)給table賦值的方法,結(jié)合具體實(shí)例形式分析了jQuery動(dòng)態(tài)操作table表格節(jié)點(diǎn)的相關(guān)技巧,需要的朋友可以參考下2017-07-07
這篇文章主要介紹了jquery獲取radio值實(shí)例,較為詳細(xì)的總結(jié)了通過jQuery獲取radio值的各種常用方法,需要的朋友可以參考下2014-10-10
JS·經(jīng)典·炫彩菜單(動(dòng)畫效果) for jquery2010-01-01
jquery ajax jsonp跨域調(diào)用實(shí)例代碼
今天研究了AJAX使用JSONP進(jìn)行跨域調(diào)用的方法，發(fā)現(xiàn)使用GET方式和POST方式都可以進(jìn)行跨域調(diào)用,這里簡單分享下，方便需要的朋友2013-12-12
jQuery實(shí)現(xiàn)ajax的疊加和停止(終止ajax請(qǐng)求)
這篇文章主要介紹了jQuery實(shí)現(xiàn)ajax的疊加和停止的關(guān)鍵代碼，代碼簡單易懂，需要的朋友可以參考下2016-08-08
這篇文章主要介紹了jQuery簡單綁定單個(gè)事件的方法,結(jié)合具體實(shí)例形式分析了jQuery使用bind方法進(jìn)行事件綁定與事件響應(yīng)的相關(guān)操作技巧,需要的朋友可以參考下2017-06-06