jQuery AnythingSlider滑動效果插件

2019-11-21 00:46:06

字體：大中小

來源：轉載

供稿：網友

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

滑動

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

由 CSS-Tricks 的 Chris Coyier 設計，功能齊全，應用十分廣泛。

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

特點：
1、滑動html內容（可以是任何內容）

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

3、導航標簽的建立是動態添加的（任何數目的幻燈片）

4、可自定義導航功能

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

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

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

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

9、從靜態鏈接到特定的幻燈片文本鏈接

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

2、JavaScript代碼：

復制代碼代碼如下:

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