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中神奇的call()方法
Mar 12 Javascript
JavaScript html5 canvas绘制时钟效果(二)
Mar 27 Javascript
JS集成fckeditor及判断内容是否为空的方法
May 27 Javascript
AngularJS使用自定义指令替代ng-repeat的方法
Sep 17 Javascript
AngularJS指令与控制器之间的交互功能示例
Dec 14 Javascript
Bootstrap3 图片(响应式图片&amp;图片形状)
Jan 04 Javascript
AngularJS监听ng-repeat渲染完成的两种方法
Jan 16 Javascript
js计算两个日期间的天数月的实例代码
Sep 20 Javascript
vue学习笔记五:在vue项目里面使用引入公共方法详解
Apr 04 Javascript
bootstrap+spring boot实现面包屑导航功能(前端代码)
Oct 09 Javascript
微信小程序图片加载失败时替换为默认图片的方法
Dec 09 Javascript
微信小程序仿抖音视频之整屏上下切换功能的实现代码
May 24 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缩略图生成程式(需要GD库支持)
2007/03/06 PHP
php实现文件编码批量转换
2014/03/10 PHP
PHP扩展mcrypt实现的AES加密功能示例
2019/01/29 PHP
在页面上点击任一链接时触发一个事件的代码
2007/04/07 Javascript
取得窗口大小 兼容所有浏览器的js代码
2011/08/09 Javascript
js多级树形弹出一个小窗口层(非常好用)实例代码
2013/03/19 Javascript
javascript冒泡排序小结
2016/04/10 Javascript
setTimeout学习小结
2017/02/08 Javascript
Vue2.0利用 v-model 实现组件props双向绑定的优美解决方案
2017/03/13 Javascript
详解react-router4 异步加载路由两种方法
2017/09/12 Javascript
将Sublime Text 3 添加到右键中的简单方法
2017/12/12 Javascript
JavaScript函数定义方法实例详解
2019/03/05 Javascript
巧妙运用v-model实现父子组件传值的方法示例
2019/04/07 Javascript
小程序scroll-view安卓机隐藏横向滚动条的实现详解
2019/05/16 Javascript
leaflet加载geojson叠加显示功能代码
2020/02/21 Javascript
js实现查询商品案例
2020/07/22 Javascript
vue 调用 RESTful风格接口操作
2020/08/11 Javascript
javascript实现打砖块小游戏(附完整源码)
2020/09/18 Javascript
vue中解决微信html5原生ios虚拟键返回不刷新问题
2020/10/20 Javascript
Python常见文件操作的函数示例代码
2011/11/15 Python
详解K-means算法在Python中的实现
2017/12/05 Python
tensorflow更改变量的值实例
2018/07/30 Python
用python建立两个Y轴的XY曲线图方法
2019/07/08 Python
django-crontab 定时执行任务方法的实现
2019/09/06 Python
python 计算积分图和haar特征的实例代码
2019/11/20 Python
Python遍历字典方式就实例详解
2019/12/28 Python
scrapy处理python爬虫调度详解
2020/11/23 Python
使用Python通过oBIX协议访问Niagara数据的示例
2020/12/04 Python
世界上最大的汽车共享网站:Zipcar
2017/01/14 全球购物
德国著名廉价网上药店:Shop-Apotheke
2017/07/23 全球购物
微软新西兰官方网站:Microsoft New Zealand
2018/08/17 全球购物
上班早退检讨书
2014/01/09 职场文书
2015年生活老师工作总结
2015/05/27 职场文书
创业计划书之网吧
2019/10/10 职场文书
Python爬虫:从m3u8文件里提取小视频的正确操作
2021/05/14 Python
Nginx 安装SSL证书完成HTTPS部署
2022/04/28 Servers