手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >jQuery AnythingSlider滑动效果插件
jQuery AnythingSlider滑动效果插件
摘要:jQuery是个宝库,而jQuery的插件体系是个取之不竭的宝库,众多开发者在jQuery框架下,设计了数不清的插件,jQuery的特长是网...

jQuery 是个宝库,而 jQuery 的插件体系是个取之不竭的宝库,众多开发者在 jQuery 框架下,设计了数不清的插件,jQuery 的特长是网页效果,因此,它的插件库也多与 UI 有关。 webdesignledger.com 网站推选了2009年度最佳 jQuery 插件,有些插件在本博客中已经有介绍,有些还没有,本文介绍的是:2009年度最佳 jQuery 插件—AnythingSlider【滑动】

滑动

在一个固定区域,循环显示几段内容,这种方式很像旧时的拉洋片,2009年,这种 Web 效果大行其道,jQuery 有大量与此有关的插件,以下插件无疑是最佳的。

jQuery AnythingSlider滑动效果插件1

由 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.jb51.net/js/AnythingSlider/index.html

AnythingSlider.rar

【jQuery AnythingSlider滑动效果插件】相关文章:

jquery.validate使用时遇到的问题

jQuery 遍历函数详解

jQuery实现表格行上下移动和置顶效果

jQuery Timelinr实现垂直水平时间轴插件(附源码下载)

实现placeholder效果的方案汇总

jQuery实现在列表的首行添加数据

打字效果

浅谈jQuery构造函数分析

JQuery分屏指示器图片轮换效果实例

滚动效果

精品推荐
分类导航