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


代码如下:

<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>

演示代码 http://demo.jb51.net/js/AnythingSlider/index.html
AnythingSlider.rar

赞 (0)

相关推荐

  • jquery实现滑动特效代码

    jquery实现滑动特效代码

    在项目中,有需求要使用jquery实现滑动效果,于是把相关内容整理如下,下文介绍了很详细,有文字说明和代码分析,需要的朋友可以来学习下. 实现方式一:  .slideUp([duration][,complete])--目标元素向上滑入隐藏: .slideDown([duration][,complete])--目标元素向下滑出显示: .slideToggle([duration][,complete])--目标元素隐藏则向下滑出显示,否则向上滑入隐藏: 注:duration为方法执行的时间区间

  • jquery实现鼠标拖拽滑动效果来选择数字的方法

    本文实例讲述了jquery实现鼠标拖拽滑动效果来选择数字的方法.分享给大家供大家参考.具体如下: 这是使用jquery ui实现的一个精美实用的效果,可以通过鼠标拖拽滑动效果来选择数字 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns

  • 用jQuery实现的智能隐藏、滑动效果的返回顶部代码

    在线DEMO:传送门 HTML代码(放在页面任意位置,并用CSS美化): 复制代码 代码如下: <p id="back-to-top"><a href="#top"><span></span>回到顶部</a></p> JS代码: <script type="text/javascript" src="js/jquery-1.7.2.min.js"&g

  • Jquery+CSS3实现一款简洁大气带滑动效果的弹出层

    Jquery+CSS3实现一款简洁大气带滑动效果的弹出层

    此Jquery特效是一款Jquery+CSS3实现简洁大气带滑动效果的弹出层,应用范围很广泛,比如用在消息提示.弹出层显示内容.弹出层登录等,带遮罩效果,虽然没有封装成插件,但使用起来也非常简单,宽度和高度直接调样式. 包含了以下功能: 1.弹出层 2.带关闭按钮 3.遮罩层效果 4.从上向下滑动显示 5.点击层外面任何地方关闭 6.绑定控制按钮 7.内容过多自动显示滚动条 如果不满足大家的要求,自己可以二次开发哦 效果如下: 在线演示

  • jQuery层动画定位滑动效果的方法

    本文实例讲述了jQuery层动画定位滑动效果的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

  • jQuery animate(滑块滑动效果代码)

    jQuery animate(滑块滑动效果代码)

    HTML 复制代码 代码如下: <p><a href="#" class="run">Run</a></p> <div id="box"> </div> <p><a href="#" class="run">Run</a></p><div id="box">

  • jQuery AnythingSlider滑动效果插件

    jQuery AnythingSlider滑动效果插件

    jQuery 是个宝库,而 jQuery 的插件体系是个取之不竭的宝库,众多开发者在 jQuery 框架下,设计了数不清的插件,jQuery 的特长是网页效果,因此,它的插件库也多与 UI 有关. webdesignledger.com 网站推选了2009年度最佳 jQuery 插件,有些插件在本博客中已经有介绍,有些还没有,本文介绍的是:2009年度最佳 jQuery 插件-AnythingSlider[滑动] 滑动 在一个固定区域,循环显示几段内容,这种方式很像旧时的拉洋片,2009年,这种

  • jquery拖动层效果插件用法实例分析(附demo源码)

    本文实例讲述了jquery拖动层效果插件用法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="l

  • jQuery内容折叠效果插件用法实例分析(附demo源码)

    本文实例讲述了jQuery内容折叠效果插件用法.分享给大家供大家参考,具体如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>jQuery Collapsible Fieldset</title> <script src=&

  • 精心挑选的12款优秀的基于jQuery的手风琴效果插件和教程

    精心挑选的12款优秀的基于jQuery的手风琴效果插件和教程

    当你想在有限的页面空间内展示多个内容片段的时候,手风琴(Accordion)效果就显得非常有用,它可以帮助你以对用户非常友好的方式实现多个内容片段之间的切换.借助流行的 jQuery 框架,只需很少的代码就可以实现精美的手风琴效果,帮助你的网站吸引更多用户的眼球. Elegant Accordion with jQuery and CSS3 首先推荐的这款插件是基于 jQuery 和 CSS3 实现的优雅的鼠标悬停手风琴效果. 制作教程 在线演示 Vertical Sliding Accordi

  • 推荐6款基于jQuery实现图片效果插件

    推荐6款基于jQuery实现图片效果插件

    1.基于jQuery实现的汇图网大屏焦点图效果 汇图网大屏jQuery焦点图代码,可设置切换模式,如淡入淡出切换,左右滚动切换,上下滚动切换,可设置是否自动轮播,可设置鼠标划过是否停止播放等. 在线演示 源码下载 2.HTML5基于SVG实现的过山车动画特效 今天我们要分享一款很酷的HTML5/SVG动画,这款HTML5动画是过山车效果,主要是利用了SVG的path动画来实现的,整体动画效果流畅自然,效果非常酷. 在线演示 源码下载 3.jQuery实现苹果官网页面上下滚动全屏效果 这是一款基于

  • 再分享70+免费的jquery 图片滑块效果插件和教程

    再分享70+免费的jquery 图片滑块效果插件和教程

    jQuery Slider插件一般是由滑块与滑动按钮组成,也有一些带暂停和继续按钮的.一般使用的Slider滑块插件,按照展示方式,可以分为两种:一种是为水平滑动:另一种是垂直滑动.当然具体的特效就有很多种了,不一一解释了.大部分的都是一些类似幻灯片的效果,也有带视差效果的.实现方式也大都是基于jQuery+html5+CSS3,大部分插件的兼容性都不错. 之前其实已经分享过28款免费实用的 JQuery 图片和内容滑块插件,但是今天发现之前的草稿里面也存了一些不错的jQuery插件,而且数量还

  • 11个用于提高排版水平的基于jquery的文字效果插件

    11个用于提高排版水平的基于jquery的文字效果插件

    排版是在网页设计当中的一个重要的元素,实现一个高层次的排版风格可以让你的网页设计看起来更令人叹为观止,当你看到一些非同寻常的排版样式,你很好奇这些绚丽的色彩文字搭配效果是如何实现的,往往我们第一印象是使用CSS实现的,可是对于自己来说感到又有一定的难度,如今的瀑布流效果,大背景缩略图效果,我们其中只关注了图片绚丽的布局,其实还有一个细节就是文字色彩排版的实现,这个其实是主要的,有一些专门用于这些效果的jQuery插件,你可以实现卓越的排版设计在您的网站上.我们都知道,在传统的排版当中使用DIV+

  • jquery左右全屏大尺寸多图滑动效果代码分享

    jquery左右全屏大尺寸多图滑动效果代码分享

    本文实例讲述了jquery左右全屏大尺寸多图滑动效果.分享给大家供大家参考.具体如下: 这是一款基于jquery实现的banner焦点图播放效果的插件,图片播放时处于满屏的状态,很具有画面感,呈现的效果更佳充实,用户的视觉体验更加具体,是一款很时尚大方的特效代码. 运行效果图:                                        -------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换

随机推荐