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 学习笔记 element属性控制
Jul 23 Javascript
基于IE下ul li 互相嵌套时的bug,排查,解决过程以及心得介绍
May 07 Javascript
chrome下jq width()方法取值为0的解决方法
May 26 Javascript
纯Javascript实现ping功能的方法
Mar 20 Javascript
js定义类的几种方法(推荐)
Jun 08 Javascript
第九篇Bootstrap导航菜单创建步骤详解
Jun 21 Javascript
Angularjs结合Bootstrap制作的一个TODO List
Aug 18 Javascript
JS button按钮实现submit按钮提交效果
Nov 01 Javascript
JavaScript闭包的简单应用
Sep 01 Javascript
极简主义法编写JavaScript类
Nov 02 Javascript
vue 使用高德地图vue-amap组件过程解析
Sep 07 Javascript
Handtrack.js库实现实时监测手部运动(推荐)
Feb 08 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中使用unset销毁变量并内存释放问题
2012/07/05 PHP
PHP编程中的常见漏洞和代码实例
2014/08/06 PHP
php使用PDO操作MySQL数据库实例
2014/12/30 PHP
php中mysql连接方式PDO使用详解
2015/02/25 PHP
PHP递归实现层级树状展开
2016/04/01 PHP
非常有用的9个PHP代码片段
2016/04/06 PHP
PHP中PDO事务处理操作示例
2018/05/02 PHP
JavaScript根据数据生成百分比图和柱状图的实例代码
2013/07/14 Javascript
使用js在页面中绘制表格核心代码
2013/09/16 Javascript
jquery.autocomplete修改实现键盘上下键自动填充示例
2013/11/19 Javascript
jQuery中:focus选择器用法实例
2014/12/30 Javascript
BootStrap实现树形目录组件代码详解
2016/06/21 Javascript
探索Javascript中this的奥秘
2016/12/11 Javascript
JS中使用new Date(str)创建时间对象不兼容firefox和ie的解决方法(两种)
2016/12/14 Javascript
JQ中$(window).load和$(document).ready区别与执行顺序
2017/03/01 Javascript
详解node.js中的npm和webpack配置方法
2018/01/21 Javascript
分享vue里swiper的一些坑
2018/08/30 Javascript
JavaScript基础教程之如何实现一个简单的promise
2018/09/11 Javascript
vue从一个页面跳转到另一个页面并携带参数的解决方法
2019/08/12 Javascript
vue视频播放插件vue-video-player的具体使用方法
2019/11/08 Javascript
小程序自定义导航栏兼容适配所有机型(附完整案例)
2020/04/26 Javascript
html+vue.js 实现漂亮分页功能可兼容IE
2020/11/07 Javascript
[01:32]寻找你心中的那团火 DOTA2 TI9火焰传递活动今日开启
2019/05/16 DOTA
win与linux系统中python requests 安装
2016/12/04 Python
教你学会使用Python正则表达式
2017/09/07 Python
使用Numpy读取CSV文件,并进行行列删除的操作方法
2018/07/04 Python
详解利用Python scipy.signal.filtfilt() 实现信号滤波
2019/06/05 Python
Python __slots__的使用方法
2020/11/15 Python
selenium自动化测试入门实战
2020/12/21 Python
FC-Moto英国:欧洲最大的摩托车服装和头盔商店之一
2019/08/25 全球购物
我想声明一个指针并为它分配一些空间, 但却不行。这些代码有什么 问题?char *p; *p = malloc(10);
2016/10/06 面试题
学前教育毕业生自荐信
2013/10/29 职场文书
保安的辞职报告怎么写
2014/01/20 职场文书
洗发露广告词
2014/03/14 职场文书
车辆安全隐患排查制度
2015/08/05 职场文书
任命书格式范文
2015/09/22 职场文书