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 相关文章推荐
div层的移动及性能优化
Nov 16 Javascript
autoPlay 基于jquery的图片自动播放效果
Dec 07 Javascript
javascript写的简单的计算器,内容很多,方法实用,推荐
Dec 29 Javascript
jquery 缓存问题的几个解决方法
Nov 11 Javascript
js二维数组定义和初始化的三种方法总结
Mar 03 Javascript
使用AngularJS对路由进行安全性处理的方法
Jun 18 Javascript
JS实现图片平面旋转的方法
Mar 01 Javascript
JS中微信小程序自定义底部弹出框
Dec 22 Javascript
JS自动生成动态HTML验证码页面
Jun 14 Javascript
vue slots 组件的组合/分发实例
Sep 06 Javascript
微信小程序下拉刷新PullDownRefresh的使用方法
Nov 29 Javascript
详解如何实现Element树形控件Tree在懒加载模式下的动态更新
Apr 25 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
星际RPG字典
2020/03/04 星际争霸
提问的智慧
2006/10/09 PHP
配置最新的PHP加MYSQL服务器
2006/10/09 PHP
PHP利用MySQL保存session的实现思路及示例代码
2014/09/09 PHP
php实现改变图片直接打开为下载的方法
2015/04/14 PHP
获取内联和链接中的样式(js代码)
2013/04/11 Javascript
JS实现金额转换(将输入的阿拉伯数字)转换成中文的实现代码
2013/09/30 Javascript
js导航栏单击事件背景变换示例代码
2014/01/13 Javascript
Jquery技巧(必须掌握)
2016/03/16 Javascript
jQuery Easyui使用(一)之可折叠面板的布局手风琴菜单
2016/08/17 Javascript
将form表单通过ajax实现无刷新提交的简单实例
2016/10/12 Javascript
BootStrap实现手机端轮播图左右滑动事件
2016/10/13 Javascript
DOM 事件的深入浅出(一)
2016/12/05 Javascript
ES6学习之变量的解构赋值
2017/02/12 Javascript
SeaJS中use函数用法实例分析
2017/10/10 Javascript
Vue循环组件加validate多表单验证的实例
2018/09/18 Javascript
详解微信小程序实现跑马灯效果(附完整代码)
2019/04/29 Javascript
Quasar Input:type=&quot;number&quot; 去掉上下小箭头 实现加减按钮样式功能
2020/04/09 Javascript
使用vue引入maptalks地图及聚合效果的实现
2020/08/10 Javascript
[53:50]CHAOS vs Mineski 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
Python语言的12个基础知识点小结
2014/07/10 Python
python如何读写json数据
2018/03/21 Python
基于pandas数据样本行列选取的方法
2018/04/20 Python
Python  unittest单元测试框架的使用
2018/09/08 Python
Django 后台带有字典的列表数据与页面js交互实例
2020/04/03 Python
一个入门级python爬虫教程详解
2021/01/27 Python
css3实现顶部社会化分享按钮示例
2014/05/06 HTML / CSS
Java语言程序设计测试题改错题部分
2014/07/22 面试题
自考毕业自我鉴定
2014/03/18 职场文书
精神文明建设先进工作者事迹材料
2014/05/02 职场文书
2014教师党员自我评议(5篇)
2014/09/20 职场文书
乡镇防汛工作汇报
2014/10/28 职场文书
房产公证书格式
2015/01/26 职场文书
幼儿园托班开学寄语(2016春季)
2015/12/03 职场文书
JavaScript实现酷炫的鼠标拖尾特效
2022/02/18 Javascript
JS精髓原型链继承及构造函数继承问题纠正
2022/06/16 Javascript