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 相关文章推荐
写js时遇到的一些小问题
Dec 06 Javascript
js去字符串前后空格5种实现方法及比较
Apr 03 Javascript
jQuery实现HTML5 placeholder效果实例
Dec 09 Javascript
JavaScript实现阿拉伯数字和中文数字互相转换
Jun 12 Javascript
由浅入深剖析Angular表单验证
Jul 14 Javascript
require.js与bootstrap结合实现简单的页面登录和页面跳转功能
May 12 Javascript
JavaScript实现点击出现图片并统计点击次数功能示例
Jul 23 Javascript
Vue插值、表达式、分隔符、指令知识小结
Oct 12 Javascript
详解在不使用ssr的情况下解决Vue单页面SEO问题
Nov 08 Javascript
解决layui数据表格table的横向滚动条显示问题
Sep 04 Javascript
JS 遍历 json 和 JQuery 遍历json操作完整示例
Nov 11 jQuery
5分钟快速看懂ES6中的反射与代理
Dec 19 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遍历文件夹与子目录的函数代码
2011/09/26 PHP
set_exception_handler函数在ThinkPHP中的用法
2014/10/31 PHP
thinkPHP js文件中U方法不被解析问题的解决方法
2016/12/05 PHP
浅析PHP类的反射来实现依赖注入过程
2018/02/06 PHP
php 使用 __call实现重载功能示例
2019/11/18 PHP
分享8个Laravel模型时间戳使用技巧小结
2020/02/12 PHP
用javascript获取textarea中的光标位置
2008/05/06 Javascript
jquery $.trim()方法使用介绍
2014/05/21 Javascript
CSS3实现动态背景登录框的代码
2015/07/28 Javascript
JavaScript实现的伸展收缩型菜单代码
2015/10/14 Javascript
JS实现网页上随滚动条滚动的层效果代码
2015/11/04 Javascript
javascript 用函数实现继承详解
2016/05/28 Javascript
Summernote实现图片上传功能的简单方法
2016/07/11 Javascript
扩展Bootstrap Tooltip插件使其可交互的方法
2016/11/07 Javascript
JSON字符串和JSON对象相互转化实例详解
2017/01/05 Javascript
微信小程序 弹框和模态框实现代码
2017/03/10 Javascript
vue 实现剪裁图片并上传服务器功能
2018/03/01 Javascript
nodejs acl的用户权限管理详解
2018/03/14 NodeJs
Auto.js自动收取自己和好友蚂蚁森林能量脚本
2018/06/28 Javascript
微信小程序系列之自定义顶部导航功能
2019/05/21 Javascript
[47:45]DOTA2-DPC中国联赛 正赛 Phoenix vs Dragon BO3 第一场 2月26日
2021/03/11 DOTA
利用Python的Twisted框架实现webshell密码扫描器的教程
2015/04/16 Python
python3基于TCP实现CS架构文件传输
2018/07/28 Python
python使用xlrd和xlwt读写Excel文件的实例代码
2018/09/05 Python
Python selenium键盘鼠标事件实现过程详解
2020/07/28 Python
htnl5利用svg页面高斯模糊的方法
2018/07/20 HTML / CSS
iframe与window.onload如何使用详解
2020/05/07 HTML / CSS
zooplus波兰:在线宠物店
2019/07/21 全球购物
如果NULL定义成#define NULL((char *)0)难道不就可以向函数传入不加转换的NULL了吗
2012/02/15 面试题
三年级数学教学反思
2014/01/31 职场文书
股权投资意向书
2014/04/01 职场文书
物理系毕业生自荐书
2014/06/13 职场文书
旅游饭店管理专业自荐书
2014/06/28 职场文书
学生党员一帮一活动总结
2014/07/08 职场文书
金融系毕业生自荐书
2014/07/08 职场文书
解决Jupyter-notebook不弹出默认浏览器的问题
2021/03/30 Python