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 相关文章推荐
javascript错误的认识不用关心内存管理
Dec 15 Javascript
关于js注册事件的常用方法
Apr 03 Javascript
如何学习Javascript入门指导
Nov 01 Javascript
php中给js数组赋值方法
Mar 10 Javascript
js用闭包遍历树状数组的方法
Mar 19 Javascript
JavaScript中的值类型详细介绍
Dec 29 Javascript
js代码实现无缝滚动(文字和图片)
Aug 20 Javascript
jQuery滚动监听实现商城楼梯式导航效果
Mar 06 Javascript
基于JS实现移动端左滑删除功能
Jul 28 Javascript
详解vue项目中调用百度地图API使用方法
Apr 25 Javascript
浅析Vue 中的 render 函数
Feb 28 Javascript
2020京东618叠蛋糕js脚本(亲测好用)
Jun 02 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中强制下载文件的代码(解决了IE下中文文件名乱码问题)
2011/05/09 PHP
探讨file_get_contents与curl效率及稳定性的分析
2013/06/06 PHP
php常用表单验证类用法实例
2015/06/18 PHP
PHP实现的文件操作类及文件下载功能示例
2016/12/24 PHP
ThinkPHP5&amp;5.1实现验证码的生成、使用及点击刷新功能示例
2020/02/07 PHP
使用JQuery和s3captche实现一个水果名字的验证
2009/08/14 Javascript
YUI模块开发原理详解
2013/11/18 Javascript
javascript中兼容主流浏览器的动态生成iframe方法
2014/05/05 Javascript
jQuery学习笔记之jQuery.extend(),jQuery.fn.extend()分析
2014/06/09 Javascript
JQuery勾选指定name的复选框集合并显示的方法
2015/05/18 Javascript
详解jQuery移动页面开发中的ui-grid网格布局使用
2015/12/03 Javascript
基于javascript实现按圆形排列DIV元素(二)
2016/12/02 Javascript
利用Javascript实现简单的转盘抽奖
2017/02/13 Javascript
JQuery实现文字无缝滚动效果示例代码(Marquee插件)
2017/03/07 Javascript
JS查找英文文章中出现频率最高的单词
2017/03/20 Javascript
js实现移动端轮播图效果
2020/12/09 Javascript
vue实现登录后页面跳转到之前页面
2018/01/07 Javascript
Bootstrap 按钮样式与使用代码详解
2018/12/09 Javascript
微信小程序本地存储实现每日签到、连续签到功能
2019/10/09 Javascript
js实现一款简单踩白块小游戏(曾经很火)
2019/12/02 Javascript
Python 使用os.remove删除文件夹时报错的解决方法
2017/01/13 Python
Python网络编程 Python套接字编程
2017/09/13 Python
Python Socket使用实例
2017/12/18 Python
Python装饰器语法糖
2019/01/02 Python
Pycharm新手教程(只需要看这篇就够了)
2019/06/18 Python
Jacobi迭代算法的Python实现详解
2019/06/29 Python
如何基于Python + requests实现发送HTTP请求
2020/01/13 Python
python 使用递归实现打印一个数字的每一位示例
2020/02/27 Python
Python代码执行时间测量模块timeit用法解析
2020/07/01 Python
美国最大的烧烤架和户外生活用品专业零售商:Barbeques Galore
2021/01/09 全球购物
介绍一下EJB的分类及其各自的功能及应用
2016/08/23 面试题
宣传策划类求职信范文
2014/01/31 职场文书
考试没考好检讨书(精选篇)
2014/11/16 职场文书
银行保安拾金不昧表扬稿
2015/05/05 职场文书
门卫管理制度范本
2015/08/05 职场文书
python爬取某网站原图作为壁纸
2021/06/02 Python