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的caller,callee,call,apply
Apr 28 Javascript
javascript 当前日期转化为中文的实现代码
May 13 Javascript
jquery和javascript的区别(常用方法比较)
Jul 04 Javascript
微信小程序 less文件编译成wxss文件实现办法
Dec 05 Javascript
Angularjs实现搜索关键字高亮显示效果
Jan 17 Javascript
jquery中each循环的简单回滚操作
May 05 jQuery
Vue2仿淘宝实现省市区三级联动
Apr 15 Javascript
Vue SSR 组件加载问题
May 02 Javascript
js实现按钮开关单机下拉菜单效果
Nov 22 Javascript
Django+vue跨域问题解决的详细步骤
Jan 20 Javascript
JS实现的冒泡排序,快速排序,插入排序算法示例
Mar 02 Javascript
产制造追溯系统之通过微信小程序实现移动端报表平台
Jun 03 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
THINKPHP+JS实现缩放图片式截图的实现
2010/03/07 PHP
PHP中执行MYSQL事务解决数据写入不完整等情况
2014/01/07 PHP
php设计模式之状态模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
javascript之更有效率的字符串替换
2008/08/02 Javascript
event对象获取方法总结在google浏览器下测试
2013/11/03 Javascript
用js的document.write输出的广告无阻塞加载的方法
2014/06/05 Javascript
处理文本部分内容的TextRange对象应用实例
2014/07/29 Javascript
javascript结合ajax读取txt文件内容
2014/12/05 Javascript
js正则匹配出所有图片及图片地址src的方法
2015/06/08 Javascript
jQuery1.9.1源码分析系列(十六)ajax之ajax框架
2015/12/04 Javascript
JS实现简单的二维矩阵乘积运算
2016/01/26 Javascript
jQuery悬停文字提示框插件jquery.tooltipster.js用法示例【附demo源码下载】
2016/07/19 Javascript
js 基础篇必看(点击事件轮播图的简单实现)
2016/08/20 Javascript
Javascript中关于Array.filter()的妙用详解
2016/12/04 Javascript
JS实现淡入淡出图片效果的方法分析
2016/12/20 Javascript
ES6新数据结构Map功能与用法示例
2017/03/31 Javascript
js 提取某()特殊字符串长度的实例
2017/12/06 Javascript
vue组件tabbar使用方法详解
2018/11/06 Javascript
7个好用的JavaScript技巧分享(译)
2019/05/07 Javascript
p5.js绘制创意自画像
2019/11/04 Javascript
python socket 超时设置 errno 10054
2014/07/01 Python
Python之自动获取公网IP的实例讲解
2017/10/01 Python
Python基于plotly模块实现的画图操作示例
2019/01/23 Python
用python 实现在不确定行数情况下多行输入方法
2019/01/28 Python
python实现文字版扫雷
2020/04/24 Python
Python如何实现的二分查找算法
2020/05/27 Python
Python3与fastdfs分布式文件系统如何实现交互
2020/06/23 Python
html5 利用重力感应实现摇一摇换颜色可用来做抽奖等等
2014/05/07 HTML / CSS
欧洲最大的高尔夫零售商:American Golf
2019/09/02 全球购物
加拿大品牌鞋包连锁店:Little Burgundy
2021/02/28 全球购物
亿阳信通股份有限公司笔试题(C#)
2016/03/04 面试题
药学专业大学生个人的自我评价
2013/11/04 职场文书
四个太阳教学反思
2014/02/01 职场文书
销售人员管理制度
2015/08/06 职场文书
班主任班级管理心得体会
2016/01/07 职场文书
Python如何快速找到多个字典中的公共键(key)
2022/04/29 Python