jQuery AnythingSlider滑动效果插件

可爱的贝贝麻麻

可爱的贝贝麻麻

2016-02-19 14:13

下面,图老师小编带您去了解一下jQuery AnythingSlider滑动效果插件,生活就是不断的发现新事物,get新技能~

打包下载

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

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代码:

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)代码如下:
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

展开更多 50%)
分享

猜你喜欢

jQuery AnythingSlider滑动效果插件

Web开发
jQuery AnythingSlider滑动效果插件

jQuery autocomplete插件修改

Web开发
jQuery autocomplete插件修改

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

jQuery 插件开发 其实很简单

Web开发
jQuery 插件开发 其实很简单

JQuery 插件制作实践 xMarquee插件V1.0

Web开发
JQuery 插件制作实践 xMarquee插件V1.0

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

jQuery animate效果演示

Web开发
jQuery animate效果演示

jquery 插件 任意位置浮动固定层

Web开发
jquery 插件 任意位置浮动固定层

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

用 AJAX 来控制书签和回退按钮

用 AJAX 来控制书签和回退按钮

真正的Java学习从入门到精通

真正的Java学习从入门到精通
下拉加载更多内容 ↓