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 动态加载脚本的4种方法
May 05 Javascript
js 学习笔记(三)
Dec 29 Javascript
Ext中下拉列表ComboBox组件store数据格式用法介绍
Jul 15 Javascript
JavaScript中的ubound函数使用实例
Nov 04 Javascript
javascript动态设置样式style实例分析
May 13 Javascript
介绍JavaScript中Math.abs()方法的使用
Jun 14 Javascript
跟我学习javascript的浮点数精度
Nov 16 Javascript
JavaScript中${pageContext.request.contextPath}取值问题及解决方案
Dec 08 Javascript
在 React、Vue项目中使用SVG的方法
Feb 09 Javascript
关于在vue 中使用百度ueEditor编辑器的方法实例代码
Sep 14 Javascript
vue中引入第三方字体文件的方法示例
Dec 17 Javascript
Vue Cli3 打包配置并自动忽略console.log语句的方法
Apr 23 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
松下Panasonic RF-B65电路分析
2021/03/02 无线电
php解析json数据实例
2014/08/19 PHP
php遍历删除整个目录及文件的方法
2015/03/13 PHP
PHP使用mysql_fetch_row查询获得数据行列表的方法
2015/03/18 PHP
非常有用的9个PHP代码片段
2016/04/06 PHP
laravel 5.4 + vue + vux + element的环境搭配过程介绍
2018/04/26 PHP
javascript读取xml实现javascript分页
2013/12/13 Javascript
angular简介和其特点介绍
2015/01/29 Javascript
javascript与jquery中的this关键字用法实例分析
2015/12/24 Javascript
原生JS:Date对象全面解析
2016/09/06 Javascript
js+html5实现复制文字按钮
2017/07/15 Javascript
微信小程序radio组件使用详解
2018/01/31 Javascript
重学JS之显示强制类型转换详解
2019/06/30 Javascript
vue 通过 Prop 向子组件传递数据的实现方法
2020/10/30 Javascript
用python写的一个wordpress的采集程序
2016/02/27 Python
说一说Python logging
2016/04/15 Python
Python闭包的两个注意事项(推荐)
2017/03/20 Python
python中实现延时回调普通函数示例代码
2017/09/08 Python
python3.5绘制随机漫步图
2018/08/27 Python
Python中flatten( )函数及函数用法详解
2018/11/02 Python
python数据预处理之数据标准化的几种处理方式
2019/07/17 Python
python实现抠图给证件照换背景源码
2019/08/20 Python
python程序中的线程操作 concurrent模块使用详解
2019/09/23 Python
python读写文件write和flush的实现方式
2020/02/21 Python
Python PIL库图片灰化处理
2020/04/07 Python
Python爬虫破解登陆哔哩哔哩的方法
2020/11/17 Python
使用html5+css3来实现slider切换效果告别javascript+css
2013/01/08 HTML / CSS
Linux文件操作命令都有哪些
2016/07/23 面试题
电子商务专业自我鉴定
2013/12/18 职场文书
社区义诊活动总结
2014/04/30 职场文书
自强之星事迹材料
2014/05/12 职场文书
2014年小学重阳节活动策划方案
2014/09/16 职场文书
国际贸易实务实训报告
2014/11/05 职场文书
2014年教师学期工作总结
2014/11/08 职场文书
Nginx图片服务器配置之后图片访问404的问题解决
2022/03/21 Servers
mysql 8.0.27 绿色解压版安装教程及配置方法
2022/04/20 MySQL