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 相关文章推荐
Jquery中获取iframe的代码
Jan 11 Javascript
jquery 操作DOM的基本用法分享
Apr 05 Javascript
JavaScript获得表单target属性的方法
Apr 02 Javascript
AngularJS基础学习笔记之简单介绍
May 10 Javascript
Jquery对新插入的节点 绑定Click事件失效的解决方法
Jun 02 Javascript
详解webpack打包vue时提取css
May 26 Javascript
vue-cli 打包使用history模式的后端配置实例
Sep 20 Javascript
javascript获取元素的计算样式
May 24 Javascript
vue双向绑定数据限制长度的方法
Nov 04 Javascript
Javascript实现单选框效果
Dec 09 Javascript
js闭包和垃圾回收机制示例详解
Mar 01 Javascript
解决vue自定义组件@click点击失效问题
Apr 30 Vue.js
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/06/05 PHP
关于file_get_contents返回为空或函数不可用的解决方案
2013/06/24 PHP
详解PHP中的null合并运算符
2015/12/30 PHP
php获取文件后缀的9种方法
2016/03/22 PHP
PHP使用openssl扩展实现加解密方法示例
2020/02/20 PHP
JavaScript高级程序设计 阅读笔记(二十) js错误处理
2012/08/14 Javascript
JQuery获取或设置ckeditor的数据(示例代码)
2013/11/15 Javascript
我的Node.js学习之路(一)
2014/07/06 Javascript
使用mouse事件实现简单的鼠标经过特效
2015/01/30 Javascript
原生js实现类似弹窗抖动效果
2015/04/02 Javascript
JavaScript制作简单的日历效果
2016/03/10 Javascript
完美JQuery图片切换效果的简单实现
2016/07/21 Javascript
JS 循环li添加点击事件 (闭包的应用)
2016/12/10 Javascript
BootStrap 弹出层代码
2017/02/09 Javascript
vue将时间戳转换成自定义时间格式的方法
2018/03/02 Javascript
JavaScript基础心法 数据类型
2018/03/05 Javascript
详解.vue文件解析的实现
2018/06/11 Javascript
微信小程序实现省市区三级地址选择
2020/06/21 Javascript
Python中的XML库4Suite Server的介绍
2015/04/14 Python
理解Python中函数的参数
2015/04/27 Python
详解使用Python处理文件目录的相关方法
2015/10/16 Python
python绘制圆柱体的方法
2018/07/02 Python
如何卸载python插件
2020/07/08 Python
Python调用JavaScript代码的方法
2020/10/27 Python
CSS3 优势以及网页设计师如何使用CSS3技术
2009/07/29 HTML / CSS
Made in Design德国:设计师家具、灯具和装饰
2019/10/31 全球购物
高中生家长会演讲稿
2014/01/14 职场文书
喝酒检查书范文
2014/02/23 职场文书
校长寄语大全
2014/04/09 职场文书
开工仪式策划方案
2014/05/23 职场文书
标准离婚协议书(2014版)
2014/10/05 职场文书
学校食品安全责任书
2015/01/29 职场文书
清洁工个人总结
2015/03/04 职场文书
2015年感恩节活动总结
2015/03/24 职场文书
python爬虫之爬取笔趣阁小说
2021/04/22 Python
python turtle绘图命令及案例
2021/11/23 Python