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 自动填写表单的实现方法
Apr 09 Javascript
javascript处理table表格的代码
Dec 06 Javascript
jquery设置元素的readonly和disabled的写法
Sep 22 Javascript
JavaScript使用push方法添加一个元素到数组末尾用法实例
Apr 06 Javascript
jquery仿百度经验滑动切换浏览效果
Apr 14 Javascript
JS实现从连接中获取youtube的key实例
Jul 02 Javascript
轻松学习Javascript闭包函数
Dec 15 Javascript
jQuery实现简单滚动动画效果
Apr 07 Javascript
详解angularJs中自定义directive的数据交互
Jan 13 Javascript
浅析JS中什么是自定义react数据验证组件
Oct 19 Javascript
关于微信小程序获取小程序码并接受buffer流保存为图片的方法
Jun 07 Javascript
使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)
Jun 09 Vue.js
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 array_multisort()函数的使用札记
2011/07/03 PHP
php 伪造ip以及url来路信息方法汇总
2014/11/25 PHP
PHP正则删除HTML代码中宽高样式的方法
2017/06/12 PHP
取键盘键位ASCII码的网页
2007/07/30 Javascript
JavaScript 应用类库代码
2008/06/02 Javascript
动态调用CSS文件的JS代码
2010/07/29 Javascript
Javascript表达式中连续的 &amp;&amp; 和 || 之赋值区别
2010/10/17 Javascript
Javascript无阻塞加载具体方式
2013/06/28 Javascript
ExtJS4中的requires使用方法示例介绍
2013/12/03 Javascript
JS循环遍历JSON数据的方法
2014/07/08 Javascript
JavaScript中的apply和call函数详解
2014/07/20 Javascript
nodejs调用cmd命令实现复制目录
2015/05/04 NodeJs
jquery仿QQ登录账号选择下拉框效果
2016/03/22 Javascript
理解javascript async的用法
2017/08/22 Javascript
AngularJS遍历获取数组元素的方法示例
2017/11/11 Javascript
JS 实现缓存算法的示例(FIFO/LRU)
2018/03/20 Javascript
react 应用多入口配置及实践总结
2018/10/17 Javascript
vue实现登录拦截
2020/06/29 Javascript
Electron实现应用打包、自动升级过程解析
2020/07/07 Javascript
python实现kMeans算法
2017/12/21 Python
python opencv 图像尺寸变换方法
2018/04/02 Python
Python numpy 点数组去重的实例
2018/04/18 Python
Python英文文本分词(无空格)模块wordninja的使用实例
2019/02/20 Python
Python学习笔记之函数的参数和返回值的使用
2019/11/20 Python
logging level级别介绍
2020/02/21 Python
python中安装django模块的方法
2020/03/12 Python
python闭包与引用以及需要注意的陷阱
2020/09/18 Python
如何在python中处理配置文件代码实例
2020/09/27 Python
CSS3制作轮播图的一种方法
2019/11/11 HTML / CSS
英语自我评价范文
2014/01/24 职场文书
《埃及的金字塔》教学反思
2014/04/07 职场文书
精神文明建设先进工作者事迹材料
2014/05/02 职场文书
党风廉政建设调研报告
2015/01/01 职场文书
2015年银行员工工作总结
2015/04/24 职场文书
《伯牙绝弦》教学反思
2016/02/16 职场文书
小程序实现悬浮按钮的全过程记录
2021/10/16 HTML / CSS