快捷導航

jQuery AnythingSlider滑動效果插件

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

2009年最受歡迎jQuery插件—AnythingSlider【滑動】

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

滑動

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

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

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

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

2、箭頭進行上、下一個幻燈片

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

4、可自定義導航功能

5、自動播放（可以選擇開始、停止播放）

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

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

8、自動播放暫停對懸停（選項）

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

使用方法：
1、導入js文件（這個地球人都會）

2、JavaScript代碼：

復制代碼代碼如下:

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