当前位置: 首页 > 图文教程 > 网络编程 > Javascript > jQuery AnythingSlider滑动效果插件

Javascript
不是原型继承那么简单!!prototype的深度探索
JavaScript与函数式编程解释
转一个日期输入控件,支持FF
用 JSON 处理缓存
改版了网上的一个js操作userdata
仿服务器端脚本方式的JS模板实现方法
javascript函数库-集合框架
Javascript模板技术
javascript实现的listview效果
JavaScript 实现網頁打印處理
(推荐一个超好的JS函数库)S.Sams Lifexperience ScriptClassLib
实现div可编辑的常见方法总结
js奇偶数判断的代码
可以支持多中格式的JS键盘
javascript静态的url如何传递
JS实多级联动下拉菜单类,简单实现省市区联动菜单!
Packer 3.0 JS压缩及混淆工具 下载
学习jquery必备 api中英文对照的chm手册 下载
用js实现CSS圆角生成更新
用js实现的抽象CSS圆角效果!!

Javascript 中的 jQuery AnythingSlider滑动效果插件


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2010-02-27   浏览: 430 ::
收藏到网摘: n/a

2009年最受欢迎jQuery插件—AnythingSlider【滑动】 jQuery 是个宝库,而 jQuery 的插件体系是个取之不竭的宝库,众多开发者在 jQuery 框架下,设计了数不清的插件,jQuery 的特长是网页效果,因此,它的插件库也多与 UI 有关。 webdesignledger.com 网站推选了2009年度最佳 jQuery 插件,有些插件在本博客中已经有介绍,有些还没有,本文介绍的是:2009年度最佳 jQuery 插件—AnythingSlider【滑动】
滑动
在一个固定区域,循环显示几段内容,这种方式很像旧时的拉洋片,2009年,这种 Web 效果大行其道,jQuery 有大量与此有关的插件,以下插件无疑是最佳的。

由 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.ruanchen.com/"http://sh.ruanchen.com/" style="color: #000">AnythingSlider.rar