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第二章
Sep 30 Javascript
JavaScript DOM 添加事件
Feb 14 Javascript
jQuery中toggleClass()方法用法实例
Jan 05 Javascript
JavaScript获取当前网页标题(title)的方法
Apr 03 Javascript
JavaScript中用getDate()方法返回指定日期的教程
Jun 09 Javascript
扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框
Feb 21 Javascript
JavaScript正则表达式的贪婪匹配和非贪婪匹配
Sep 05 Javascript
新版vue-cli模板下本地开发环境使用node服务器跨域的方法
Apr 03 Javascript
vue鼠标悬停事件实例详解
Apr 01 Javascript
详解关于表格合并span-method方法的补充(表格数据由后台动态返回)
May 21 Javascript
vue实现节点增删改功能
Sep 26 Javascript
vue 解决setTimeOut和setInterval函数无效报错的问题
Jul 30 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
Smarty的配置与高级缓存技术分享
2012/06/05 PHP
浅析memcache启动以及telnet命令详解
2013/06/28 PHP
使用php实现快钱支付功能(涉及到接口)
2013/07/01 PHP
Nigma vs Liquid BO3 第二场2.14
2021/03/10 DOTA
javascript div 弹出可拖动窗口
2009/02/26 Javascript
javascript 表单规则集合对象
2009/07/21 Javascript
ExtJS Ext.MessageBox.alert()弹出对话框详解
2010/04/02 Javascript
如何确保JavaScript的执行顺序 之jQuery.html深度分析
2011/03/03 Javascript
基于jquery的3d效果实现代码
2011/03/23 Javascript
如何制作浮动广告 JavaScript制作浮动广告代码
2012/12/30 Javascript
Jquery 点击按钮自动高亮实现原理及代码
2014/04/25 Javascript
Javascript MVC框架Backbone.js详解
2014/09/18 Javascript
使用微信内嵌H5网页解决JS倒计时失效问题
2017/01/13 Javascript
Angular项目中$scope.$apply()方法的使用详解
2017/07/26 Javascript
BootStrap Table实现server分页序号连续显示功能(当前页从上一页的结束序号开始)
2017/09/12 Javascript
JS遍历DOM文档树的方法实例详解
2018/04/03 Javascript
13 个npm 快速开发技巧(推荐)
2019/07/04 Javascript
微信小程序分享小程序码的生成(带参数)以及参数的获取
2020/03/25 Javascript
JS异步宏队列微队列原理详解
2020/09/09 Javascript
vue 动态添加class,三个以上的条件做判断方式
2020/11/02 Javascript
[03:07]DOTA2英雄基础教程 冰霜诅咒极寒幽魂
2013/12/06 DOTA
Python2中的raw_input() 与 input()
2015/06/12 Python
python 统计列表中不同元素的数量方法
2018/06/29 Python
通过python将大量文件按修改时间分类的方法
2018/10/17 Python
在Django中预防CSRF攻击的操作
2020/03/13 Python
Python模拟登录和登录跳转的参考示例
2020/10/30 Python
基础的CSS3弹性盒Flexbox布局使用实例
2016/04/08 HTML / CSS
WoolOvers爱尔兰:羊绒、羊毛和棉针织品
2017/01/04 全球购物
味多美官网:蛋糕订购,100%使用天然奶油
2017/11/10 全球购物
你懂得怎么写自荐信吗?
2013/12/27 职场文书
护理个人求职信范文
2014/01/08 职场文书
幼儿教师研修感言
2014/02/12 职场文书
文明班集体申报材料
2014/05/23 职场文书
幼儿园五一劳动节活动总结
2015/02/09 职场文书
幼儿园教师安全责任书
2015/05/08 职场文书
高老头读书笔记
2015/06/30 职场文书