滾動(dòng)圖片效果 jquery實(shí)現(xiàn)回旋滾動(dòng)效果
更新時(shí)間：2013年01月08日 09:27:12 作者：
jquery滾動(dòng)圖片效果,有些新手朋友可能不是很清楚，今天在網(wǎng)上找到一款回旋滾動(dòng)效果，拿出來(lái)和大家一起分享，感興趣的朋友可以了解下哦
今天在網(wǎng)上找到一款回旋滾動(dòng)效果，拿出來(lái)和大家一起分享。先上效果圖：
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)上下載，這里就不寫了，太長(zhǎ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)上下載，這里就不寫了，太長(zhǎng)了。點(diǎn)擊官網(wǎng)地址。
相關(guān)文章
在初始化jQuery對(duì)象的代碼開始之前聲明了一大堆變量。主要包括：全局變量的備份；處理字符串用的正則表達(dá)式；檢測(cè)瀏覽器的正則表達(dá)式；對(duì)核心函數(shù)的引用備份。這里略過大部分，只說兩種：全局變量和瀏覽器檢測(cè)。2011-05-05
大家都知道dom是一種與瀏覽器、平臺(tái)、語(yǔ)言無(wú)關(guān)的接口，使用dom接口可以很輕松訪問頁(yè)面中所有的標(biāo)準(zhǔn)組件，本篇文章主要給大家講解jquery基礎(chǔ)教程之dom操作，有需要的朋友可以參考下2015-08-08
jquery實(shí)現(xiàn)圖片上傳前本地預(yù)覽
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)圖片上傳前本地預(yù)覽功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-04-04
jquery 指南/入門基礎(chǔ)...2007-11-11
實(shí)例解析jQuery中proxy()函數(shù)的用法
proxy()主要用于在同樣的上下文語(yǔ)境中指向另一個(gè)對(duì)象,下面我們就以實(shí)例解析jQuery中proxy()函數(shù)的用法,需要的朋友可以參考下2016-05-05
jQuery實(shí)現(xiàn)簡(jiǎn)易商城系統(tǒng)項(xiàng)目實(shí)操
這篇文章主要介紹了jQuery實(shí)現(xiàn)簡(jiǎn)易商城系統(tǒng)項(xiàng)目實(shí)操，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，感興趣的小伙伴可以參考一下2022-06-06
JavaScript的jQuery庫(kù)中function的存在和參數(shù)問題
這篇文章主要介紹了JavaScript的jQuery庫(kù)中function的存在和參數(shù)問題,包括function的參數(shù)傳遞和檢測(cè)一個(gè)jQuery方法是否存在等,需要的朋友可以參考下2015-08-08
為jquery.ui.dialog 增加“自動(dòng)記住關(guān)閉時(shí)的位置”的功能
筆者在項(xiàng)目中使用 jquery.ui.dialog 1.7.2時(shí)，當(dāng)使用$("#d").dialog("open");時(shí)，dialog總是彈出在option中指定的位置；2009-11-11
jquery UI Datepicker時(shí)間控件的使用及問題解決
這篇文章主要介紹了jquery UI Datepicker時(shí)間控件的使用及與asp.net中的UpdatePanel聯(lián)合使用時(shí)的失效問題解決，感興趣的小伙伴們可以參考一下2016-04-04
Jquery和CSS實(shí)現(xiàn)選擇框重置按鈕功能
在本篇文章中我們給大家?guī)?lái)了Jquery和CSS實(shí)現(xiàn)選擇框重置按鈕功能的相關(guān)代碼，需要的朋友們參考下。2018-11-11