快捷導(dǎo)航

jQuery AnythingSlider滑動(dòng)效果插件

更新時(shí)間：2010年02月07日 09:44:47 作者：

2009年最受歡迎jQuery插件—AnythingSlider【滑動(dòng)】

jQuery 是個(gè)寶庫，而 jQuery 的插件體系是個(gè)取之不竭的寶庫，眾多開發(fā)者在 jQuery 框架下，設(shè)計(jì)了數(shù)不清的插件，jQuery 的特長是網(wǎng)頁效果，因此，它的插件庫也多與 UI 有關(guān)。 webdesignledger.com 網(wǎng)站推選了2009年度最佳 jQuery 插件，有些插件在本博客中已經(jīng)有介紹，有些還沒有，本文介紹的是：2009年度最佳 jQuery 插件—AnythingSlider【滑動(dòng)】

滑動(dòng)

在一個(gè)固定區(qū)域，循環(huán)顯示幾段內(nèi)容，這種方式很像舊時(shí)的拉洋片，2009年，這種 Web 效果大行其道，jQuery 有大量與此有關(guān)的插件，以下插件無疑是最佳的。

由 CSS-Tricks 的 Chris Coyier 設(shè)計(jì)，功能齊全，應(yīng)用十分廣泛。

由于插件的官方CSS-Tricks是英文的，先大致翻譯下插件的特點(diǎn)及使用方法。

特點(diǎn)：
1、滑動(dòng)html內(nèi)容（可以是任何內(nèi)容）

2、箭頭進(jìn)行上、下一個(gè)幻燈片

3、導(dǎo)航標(biāo)簽的建立是動(dòng)態(tài)添加的（任何數(shù)目的幻燈片）

4、可自定義導(dǎo)航功能

5、自動(dòng)播放（可以選擇開始、停止播放）

6、每個(gè)幻燈片都有tag（可以直接鏈接到待定的幻燈片）

7、無限、連續(xù)滑動(dòng)（幻燈片總是在你要去的方向，即使在“最后”幻燈片）

8、自動(dòng)播放暫停對懸停（選項(xiàng)）

9、從靜態(tài)鏈接到特定的幻燈片文本鏈接

使用方法：
1、導(dǎo)入js文件（這個(gè)地球人都會(huì)）

2、JavaScript代碼：

復(fù)制代碼代碼如下:

<script type="text/javascript"> 
function formatText(index, panel) { 
return index + ""; 
} 
$(function () { 
$('.anythingSlider').anythingSlider({ 
easing: "easeInOutExpo", // 定義插件 
autoPlay: true, // 這將關(guān)閉整個(gè)FUNCTIONALY，如果它不只是開始運(yùn)行與否。 
delay: 3000, // 自動(dòng)播放模式下，幻燈片輪換時(shí)間 
startStopped: false, //如果是自動(dòng)播放，這可以迫使它停止啟動(dòng) 
animationTime: 600, // 幻燈片的過渡時(shí)間 
hashTags: true, // 是否跟換hashtag是鏈接地址 
buildNavigation: true, // 如果是真，建立和錨鏈接列表鏈接到每張幻燈片 
pauseOnHover: true, // 如果是真，并啟用自動(dòng)播放，鼠標(biāo)經(jīng)過暫停播放 
startText: "Go", // Start text 
stopText: "Stop", // Stop text 
navigationFormatter: formatText // 在這個(gè)文件的頂部使用詳情（高級(jí)使用） 
}); 
$("#slide-jump").click(function(){ 
$('.anythingSlider').anythingSlider(6); 
}); 
}); 
</script> 