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 相关文章推荐
多次注册事件会导致一个事件被触发多次的解决方法
Aug 12 Javascript
Jquery实现自定义窗口随意的拖拽
Mar 12 Javascript
自定义百度分享的分享按钮
Mar 18 Javascript
js实现延迟加载的方法
Jun 24 Javascript
微信小程序 同步请求授权的详解
Aug 04 Javascript
React Native中NavigatorIOS组件的简单使用详解
Jan 27 Javascript
vue-cli webpack模板项目搭建及打包时路径问题的解决方法
Feb 26 Javascript
vue添加axios,并且指定baseurl的方法
Sep 19 Javascript
微信小程序tabbar底部导航
Nov 05 Javascript
js删除数组中某几项的方法总结
Jan 16 Javascript
详解node登录接口之密码错误限制次数(含代码)
Oct 25 Javascript
VSCode插件安装完成后的配置(常用配置)
Aug 24 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
实用函数4
2007/11/08 PHP
php mysql Errcode: 28 终极解决方法
2009/07/01 PHP
PHP判断远程图片是否存在的几种方法
2014/05/04 PHP
Laravel 验证码认证学习记录小结
2019/12/20 PHP
经验几则 推荐
2006/09/05 Javascript
[Web]防止用户复制页面内容和另存页面的方法
2009/02/06 Javascript
jQuery AjaxQueue改进步骤
2011/10/06 Javascript
js中onload与onunload的使用示例
2013/08/25 Javascript
框架页面高度自动刷新的Javascript脚本
2013/11/01 Javascript
JavaScript实现的一个计算数字步数的算法分享
2014/12/06 Javascript
JavaScript中数据结构与算法(二):队列
2015/06/19 Javascript
jquery事件的ready()方法使用详解
2015/11/11 Javascript
win7下安装配置node.js+express开发环境
2015/12/06 Javascript
实用又漂亮的BootstrapValidator表单验证插件
2016/05/30 Javascript
angularjs 源码解析之injector
2016/08/22 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(二)
2016/09/14 Javascript
vuex与组件联合使用的方法
2018/05/10 Javascript
微信小程序中遇到的iOS兼容性问题小结
2018/11/14 Javascript
node.js express框架实现文件上传与下载功能实例详解
2019/10/15 Javascript
[01:10:24]DOTA2-DPC中国联赛 正赛 VG vs Aster BO3 第一场 2月28日
2021/03/11 DOTA
python笔记(1) 关于我们应不应该继续学习python
2012/10/24 Python
python实现清屏的方法
2015/04/30 Python
Python实现二叉树结构与进行二叉树遍历的方法详解
2016/05/24 Python
Python自定义进程池实例分析【生产者、消费者模型问题】
2016/09/19 Python
Python 专题二 条件语句和循环语句的基础知识
2017/03/19 Python
Python根据已知邻接矩阵绘制无向图操作示例
2018/06/23 Python
使用pyshp包进行shapefile文件修改的例子
2019/12/06 Python
Python基于Faker假数据构造库
2020/11/30 Python
高等教育学自荐书范文
2014/02/10 职场文书
歌唱比赛主持词
2014/03/18 职场文书
护理专科毕业自荐信范文
2014/04/21 职场文书
养牛场项目建议书
2014/05/13 职场文书
环境监测与治理技术专业求职信
2014/07/06 职场文书
2015年个人实习工作总结
2015/05/28 职场文书
springboot临时文件存储目录配置方式
2021/07/01 Java/Android
2021年国产动漫公司排行前十名,玄机科技上榜,第二推出过铠甲勇士
2022/03/18 杂记