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 22 Javascript
利用jQuery的$.event.fix函数统一浏览器event事件处理
Dec 21 Javascript
基于jquery实现的文字向上跑动类似跑马灯的效果
Jun 17 Javascript
IE及IE6浏览器中判断JS文件加载成功失败的方法
Feb 18 Javascript
js实现Select列表内容自动滚动效果代码
Aug 20 Javascript
Clipboard.js 无需Flash的JavaScript复制粘贴库
Oct 02 Javascript
你所未知的3种Node.js代码优化方式
Feb 25 Javascript
快速使用Bootstrap搭建传送带
May 06 Javascript
AngularJS基础 ng-selected 指令简单示例
Aug 03 Javascript
基于jQuery实现一个marquee无缝滚动的插件
Mar 09 Javascript
vue轮播图插件vue-awesome-swiper的使用代码实例
Jul 10 Javascript
基于casperjs和resemble.js实现一个像素对比服务详解
Jan 10 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
晶体管来复再生式二管收音机
2021/03/02 无线电
用PHP创建PDF中文文档
2006/10/09 PHP
PHP 加密解密内部算法
2010/04/22 PHP
php实现简单的语法高亮函数实例分析
2015/04/27 PHP
客户端静态页面玩分页
2006/06/26 Javascript
来自chinaz的ajax获取评论代码
2008/05/03 Javascript
40款非常棒的jQuery 插件和制作教程(系列二)
2011/11/02 Javascript
jQuery点击tr实现checkbox选中的方法
2013/03/19 Javascript
javascript中通过arguments参数伪装方法重载
2014/10/08 Javascript
JQuery插件ajaxfileupload.js异步上传文件实例
2015/05/19 Javascript
用jquery获取自定义的标签属性的值简单实例
2016/09/17 Javascript
javascript中的后退和刷新实现方法
2016/11/10 Javascript
vue动态路由实现多级嵌套面包屑的思路与方法
2017/08/16 Javascript
Nodejs 复制文件/文件夹的方法
2017/08/24 NodeJs
在 Node.js 中使用原生 ES 模块方法解析
2017/09/19 Javascript
vue配置多页面的实现方法
2018/05/22 Javascript
VUE在for循环里面根据内容值动态的加入class值的方法
2018/08/12 Javascript
Vue 实现复制功能,不需要任何结构内容直接复制方式
2019/11/09 Javascript
深入理解Python3中的http.client模块
2017/03/29 Python
详解Python中的测试工具
2019/06/09 Python
python爬取Ajax动态加载网页过程解析
2019/09/05 Python
使用Python的turtle模块画国旗
2019/09/24 Python
使用python-cv2实现视频的分解与合成的示例代码
2020/10/26 Python
Nike英国官网:Nike.com (UK)
2017/02/13 全球购物
THE OUTNET美国官网:国际设计师品牌折扣网站
2017/03/07 全球购物
Ralph Lauren法国官网:美国高品味时装品牌
2017/12/08 全球购物
技术总监的工作职责
2013/11/13 职场文书
中西医专业毕业生职业规划书
2014/02/24 职场文书
学校综治宣传月活动总结
2014/07/02 职场文书
走进敬老院活动总结
2014/07/10 职场文书
乡镇2014法制宣传日活动总结
2014/11/01 职场文书
2014年外联部工作总结
2014/11/17 职场文书
典型事迹材料范文
2014/12/29 职场文书
毕业生入职感言
2015/07/31 职场文书
Redis实现订单自动过期功能的示例代码
2021/05/08 Redis
十大最强水系宝可梦,最美宝可梦排第三,榜首大家最熟悉
2022/03/18 日漫