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中的Split使用方法与技巧
Mar 09 Javascript
javascript 触发HTML元素绑定的函数
Sep 11 Javascript
javascript实现可改变滚动方向的无缝滚动实例
Jun 17 Javascript
javascript打印html内容功能的方法示例
Nov 28 Javascript
node.js中的http.request方法使用说明
Dec 14 Javascript
JS实现同一个网页布局滑动门和TAB选项卡实例
Sep 23 Javascript
JavaScript原型继承_动力节点Java学院整理
Jun 30 Javascript
js求数组中全部数字可拼接出的最大整数示例代码
Aug 25 Javascript
vuex 项目结构目录及一些简单配置介绍
Apr 08 Javascript
更改BootStrap popover的默认样式及popover简单用法
Sep 13 Javascript
zepto.js 实时监听输入框的方法
Dec 04 Javascript
动态实现element ui的el-table某列数据不同样式的示例
Jan 22 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
深入解析Session是否必须依赖Cookie
2013/08/02 PHP
PHP_NETWORK_GETADDRESSES: GETADDRINFO FAILED问题解决办法
2014/05/04 PHP
今天你说520了吗?不仅有php表白书还有java表白神器
2016/05/20 PHP
PHP判断文件是否被引入的方法get_included_files用法示例
2016/11/29 PHP
fix-ie5.js扩展在IE5下不能使用的几个方法
2007/08/20 Javascript
Raphael一个用于在网页中绘制矢量图形的Javascript库
2013/01/08 Javascript
Extjs4 消息框去掉关闭按钮(类似Ext.Msg.alert)
2013/04/02 Javascript
js判断当前页面用什么浏览器打开的方法
2016/01/06 Javascript
jquery延迟对象解析
2016/10/26 Javascript
JavaScript自定义函数实现查找两个字符串最长公共子串的方法
2016/11/24 Javascript
AngularJS 实现点击按钮获取验证码功能实例代码
2017/07/13 Javascript
想用好React的你必须要知道的一些事情
2017/07/24 Javascript
在原生不支持的旧环境中添加兼容的Object.keys实现方法
2017/09/11 Javascript
vue中实现Monaco Editor自定义提示功能
2019/07/05 Javascript
VUE路由动态加载实例代码讲解
2019/08/26 Javascript
JavaScript设计模式--桥梁模式引入操作实例分析
2020/05/23 Javascript
小程序选项卡以及swiper套用(跨页面)
2020/06/19 Javascript
vue-列表下详情的展开与折叠案例
2020/07/28 Javascript
原生JS实现拖拽效果
2020/12/04 Javascript
利用JS判断元素是否为数组的方法示例
2021/01/08 Javascript
python实现在每个独立进程中运行一个函数的方法
2015/04/23 Python
Python实现绘制双柱状图并显示数值功能示例
2018/06/23 Python
Django中的Model操作表的实现
2018/07/24 Python
Python线程池模块ThreadPoolExecutor用法分析
2018/12/28 Python
python批量识别图片指定区域文字内容
2019/04/30 Python
python中dict使用方法详解
2019/07/17 Python
解决Django加载静态资源失败的问题
2019/07/28 Python
python文件操作seek()偏移量,读取指正到指定位置操作
2020/07/05 Python
使用CSS3实现多列布局与多背景的技巧
2016/02/29 HTML / CSS
HTML5之SVG 2D入门2—图形绘制(基本形状)介绍及使用
2013/01/30 HTML / CSS
在C#中如何实现多态
2014/07/02 面试题
联谊会主持词
2014/03/26 职场文书
如何书写读后感?(附范文)
2019/07/26 职场文书
JS 4个超级实用的小技巧 提升开发效率
2021/10/05 Javascript
《艾尔登法环》发布最新「战技」宣传片
2022/04/03 其他游戏
Java线程的6种状态与生命周期
2022/05/11 Java/Android