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 相关文章推荐
struts2+jquery+json实现异步加载数据(自写)
Jun 24 Javascript
javaScript arguments 对象使用介绍
Oct 18 Javascript
JavaScript实现把rgb颜色转换成16进制颜色的方法
Jun 01 Javascript
AngularJS入门教程之过滤器用法示例
Nov 02 Javascript
Angularjs2不同组件间的通信实例代码
May 06 Javascript
JavaScript实现换肤功能
Sep 15 Javascript
vue 项目中使用Loading组件的示例代码
Aug 31 Javascript
JavaScript偏函数与柯里化实例详解
Mar 27 Javascript
详解关于webpack多入口热加载很慢的原因
Apr 24 Javascript
Javascript实现秒表计时游戏
May 27 Javascript
微信小程序转化为uni-app项目的方法示例
May 22 Javascript
原生JavaScript实现轮播图
Jan 10 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实现WEB动态网页静态
2006/10/09 PHP
CI框架源码解读之利用Hook.php文件完成功能扩展的方法
2016/05/18 PHP
关于viewport,Ext.panel和Ext.form.panel的关系
2009/05/07 Javascript
很棒的学习jQuery的12个网站推荐
2011/04/28 Javascript
JavaScript 判断浏览器是否支持SVG的代码
2013/03/21 Javascript
Javascript浅谈之this
2013/12/17 Javascript
jQuery实现的支持IE的html滑动条
2015/03/16 Javascript
JavaScript实现信用卡校验方法
2015/04/07 Javascript
jQuery实现获取table表格第一列值的方法
2016/03/01 Javascript
jquery轮播的实现方式 附完整实例
2016/07/28 Javascript
AngularJS 输入验证详解及实例代码
2016/07/28 Javascript
完美的js图片轮换效果
2017/02/05 Javascript
详解vue-router和vue-cli以及组件之间的传值
2017/07/04 Javascript
react配合antd组件实现的管理系统示例代码
2018/04/24 Javascript
Node.js在图片模板上生成二维码图片并附带底部文字说明实现详解
2019/08/07 Javascript
layui 实现自动选择radio单选框(checked)的方法
2019/09/03 Javascript
JavaScript Array对象使用方法解析
2019/09/24 Javascript
小程序实现多个选项卡切换
2020/06/19 Javascript
在vue中使用inheritAttrs实现组件的扩展性介绍
2020/12/07 Vue.js
基于python监控程序是否关闭
2020/01/14 Python
开启Django博客的RSS功能的实现方法
2020/02/17 Python
Pyqt5 关于流式布局和滚动条的综合使用示例代码
2020/03/24 Python
旷课检讨书大全
2014/01/21 职场文书
护理专业自荐信范文
2014/02/26 职场文书
降消项目实施方案
2014/03/30 职场文书
投标担保书范文
2014/04/02 职场文书
党员活动日总结
2014/05/05 职场文书
语文教研活动总结
2014/07/02 职场文书
感恩老师演讲稿600字
2014/08/28 职场文书
学生个人总结范文
2015/02/15 职场文书
2015年乡镇财政工作总结
2015/05/19 职场文书
新员工实习期个人工作总结
2015/10/15 职场文书
2016年公司“3.12”植树节活动总结
2016/03/16 职场文书
学会掌握自己命运的十条黄金法则:
2019/08/08 职场文书
Html5新增了哪些功能
2021/04/16 HTML / CSS
解决Springboot PostMapping无法获取数据的问题
2022/05/06 Java/Android