又一个强大的jQuery滚动插件

 

 

DEMO   Download 

 

    跟之前介绍的一个十分简洁滚动插件EasySilder不一样（猛点此处查看：http://jsssc.cn/easy-slider-15-the-easiest-jquery-plugin-for-sliding/）,这个组件有诸多优点：

• 可滑动任何HTML内容


• 上下页导航箭头


• 导航tab页支持无限动态创建


• 可对导航文字进行自定义


• 支持可暂停的自动播放


• 每一个滚动项均有#标签方便连接至任意特定项


• 支持无限连续滚动


• 支持同一页面多个滚动效果


• 可选的鼠标滑过暂停滚动效果


• 支持从普通链接直接跳转至相应的滚动项（意思是页面上的文本链接点击后直接滑动至该滚动项）

该插件的英文详细介绍看这里：http://css-tricks.com/anythingslider-jquery-plugin/

使用介绍&参数说明

$(’.anythingSlider’).anythingSlider({
        easing: “swing”,                // Anything other than “linear” or “swing” requires the easing plugin

        autoPlay: true,                 // 是否自动播放
        startStopped: false,            // 如果选择自动播放，这个配置让插件开始时时停止的
        delay: 3000,                    // 自动切换时间

        animationTime: 600,             // 过渡效果持续时间
        hashTags: true,                 // 是否让#标签来变化当前url

        buildNavigation: true,          // 是否添加导航tab
        pauseOnHover: true,             // 是否在鼠标hover时暂停滚动

        startText: “Start”,             // 开始按钮文字
        stopText: “Stop”,               // 结束按钮文字
        navigationFormatter: null       // 自定义的文字格式化函数名，详细使用可参照demo源码
});

 自定义使用

• 添加删除滚动项：仅需添加或删除<div class=”wrapper”>内的<li>标签即可。


• 修改滚动框大小：如果你需要将滚动框的大小从660px改为580px，你需要修改css文件中.anythingSlider ul li 为580px，把.anythingSlider .wrapper 的宽度改为 580px，将.anythingSlider 的width减少100px 为660px。


• 直接连接至滚动框：

  $(”#slide-jump”).click(function(){
      $(’.anythingSlider’).anythingSlider(6);
  });

 

本插件制作者为：http://css-tricks.com, Remy Sharp’s(采用他的部分源码), Doug Neiner（为插件添加更多功能……）。

   这个插件具有很强的自定义功能，稍微修样式即可符合各种使用需要。

  还有，它是jQuery插件。

Related posts:

1. jQuery放大镜插件
2. JQuery高亮插件
3. EasySlider-最简洁的JQuery滚动插件