受欢迎jQuery插件—AnythingSlider【滑动】

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代码：

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>

 

 

查看demo