jQuery AnythingSlider滑动效果插件


Posted in Javascript onFebruary 07, 2010

jQuery 是个宝库,而 jQuery 的插件体系是个取之不竭的宝库,众多开发者在 jQuery 框架下,设计了数不清的插件,jQuery 的特长是网页效果,因此,它的插件库也多与 UI 有关。 webdesignledger.com 网站推选了2009年度最佳 jQuery 插件,有些插件在本博客中已经有介绍,有些还没有,本文介绍的是:2009年度最佳 jQuery 插件—AnythingSlider【滑动】

滑动

在一个固定区域,循环显示几段内容,这种方式很像旧时的拉洋片,2009年,这种 Web 效果大行其道,jQuery 有大量与此有关的插件,以下插件无疑是最佳的。
jQuery AnythingSlider滑动效果插件
由 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.3water.com/js/AnythingSlider/index.html
AnythingSlider.rar
Javascript 相关文章推荐
JavaScript DOM 学习第七章 表单的扩展
Feb 19 Javascript
javascript AOP 实现ajax回调函数使用比较方便
Nov 20 Javascript
javascript使用switch case实现动态改变超级链接文字及地址
Dec 16 Javascript
详解JavaScript实现设计模式中的适配器模式的方法
May 18 Javascript
基于AngularJs + Bootstrap + AngularStrap相结合实现省市区联动代码
May 30 Javascript
详解Vue的computed(计算属性)使用实例之TodoList
Aug 07 Javascript
JS库中的Particles.js在vue上的运用案例分析
Sep 13 Javascript
jQuery实现点击下拉框中的值累加到文本框中的方法示例
Oct 28 jQuery
Vue.js获取被选择的option的value和text值方法
Aug 24 Javascript
解决vue keep-alive 数据更新的问题
Sep 21 Javascript
vue同个按钮控制展开和折叠同个事件操作
Jul 29 Javascript
javascript的setTimeout()使用方法总结
Nov 20 Javascript
javascript 函数速查表
Feb 07 #Javascript
js 键盘记录实现(兼容FireFox和IE)
Feb 07 #Javascript
javascript 同时在IE和FireFox获取KeyCode的代码
Feb 07 #Javascript
JQuery Dialog(JS 模态窗口,可拖拽的DIV)
Feb 07 #Javascript
jquery 图片Silhouette Fadeins渐显效果
Feb 07 #Javascript
选择TreeView控件的树状数据节点的JS方法(jquery)
Feb 06 #Javascript
jquery 应用代码 方便的排序功能
Feb 06 #Javascript
You might like
浅析php中常量,变量的作用域和生存周期
2013/08/10 PHP
PHP实现对文本数据库的常用操作方法实例演示
2014/07/04 PHP
PHP学习笔记(一):基本语法之标记、空白、和注释
2015/04/17 PHP
老生常谈PHP 文件写入和读取(必看篇)
2017/05/22 PHP
PHP中非常有用却鲜有人知的函数集锦
2019/08/17 PHP
php数值计算num类简单操作示例
2020/05/15 PHP
优化网页之快速的呈现我们的网页
2007/06/29 Javascript
javaScript call 函数的用法说明
2010/04/09 Javascript
基于JQuery的一个简单的鼠标跟随提示效果
2010/09/23 Javascript
jQuery常见开发技巧详细整理
2013/01/02 Javascript
javascript中RegExp保留小数点后几位数的方法分享
2013/08/13 Javascript
使用JavaScript的ActiveXObject对象检测应用程序是否安装的方法
2014/04/15 Javascript
js中通过父级进行查找定位元素
2014/06/15 Javascript
动态JavaScript所造成一些你不知道的危害
2016/09/25 Javascript
JavaScript实现自动切换图片代码
2016/10/11 Javascript
JavaScript中的await/async的作用和用法
2016/10/31 Javascript
Node.js中.pfx后缀文件的处理方法
2017/03/10 Javascript
利用vueJs实现图片轮播实例代码
2017/06/03 Javascript
vue源码入口文件分析(推荐)
2018/01/30 Javascript
jQuery实现遍历XML节点和属性的方法示例
2018/04/29 jQuery
Nodejs使用archiver-zip-encrypted库加密压缩文件时报错(解决方案)
2019/11/18 NodeJs
vue+vant实现购物车全选和反选功能
2020/11/17 Vue.js
Python深入学习之特殊方法与多范式
2014/08/31 Python
Python中用函数作为返回值和实现闭包的教程
2015/04/27 Python
Python 操作文件的基本方法总结
2017/08/10 Python
如何用Python实现简单的Markdown转换器
2018/07/16 Python
将pytorch转成longtensor的简单方法
2020/02/18 Python
python图片验证码识别最新模块muggle_ocr的示例代码
2020/07/03 Python
python实现数学模型(插值、拟合和微分方程)
2020/11/13 Python
关于HTML5的安全问题开发人员需要牢记的
2012/06/21 HTML / CSS
Bonami斯洛伐克:购买家具和家居饰品
2019/07/02 全球购物
女子职高个人自荐书
2014/02/01 职场文书
幼儿园欢迎词范文
2015/01/26 职场文书
考试作弊检讨书
2015/01/27 职场文书
明确岗位职责
2015/02/14 职场文书
单位工作证明范本
2015/06/15 职场文书