jQuery AnythingSlider滑动效果插件

2016-02-19 14:13 29 1 收藏

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

【 tulaoshi.com - Web开发】

打包下载

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

（本文来源于图老师网站，更多请访问http://www.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

来源:http://www.tulaoshi.com/n/20160219/1606448.html

上一篇：用 AJAX 来控制书签和回退按钮
下一篇：真正的Java学习从入门到精通

看过《jQuery AnythingSlider滑动效果插件》的人还看了以下文章更多>>

jQuery AnythingSlider滑动效果插件 02-19
jQuery autocomplete插件修改 02-19
jQuery 插件开发其实很简单 02-19
JQuery 插件制作实践 xMarquee插件V1.0 02-19
jQuery animate效果演示 02-19
jquery 插件任意位置浮动固定层 02-19
jquery 图片预加载自动等比例缩放插件 02-19
jquery 最简单易用的表单验证插件 02-19
jquery (show,fadeOut,Animate)简单效果 02-19
jQuery formValidator表单验证插件开源了含API帮助、 02-19

Jquery 学习笔记（二）

标签： Web开发

选择器从最开始看到Jquery这样的选择器就让我想起了CSS的选择器，简直是同出一辙啊，CSS的选择器语法个人觉得相当的经典，那么Jquery借鉴CSS也就没有多少疑问了。还是复习一下Jquery的选择器吧其中h1为选择器，color:red与background:#d00与声明，两者结合也即{}内称为声明块；color与background称为属性；red与#d00称为值。其中选...

jquery tagname 取得方法

标签： Web开发

如果你查找Jquery的API，会发现这个好象是Jquery的一个盲点，找来找去也没有明确说明用什么办法可以取到HTML标签的名字，如果直接用 $("H1").tagName 这样的方式也无法取到“H1”这样的值，好象只会得到“undifined”。后来发现Jquery居然将tagName也视为属性之一了，有趣。所以用 $("H1").attr("tagName") !DOCTYPE html PUBLIC "-...

JQuery 无废话系列教程(一) jquery入门 [推荐]

标签： Web开发

本文的宗旨, 授人鱼不如授人渔. 我只会讲关键部分,不可能JQuery的每个函数我都讲,因为有很多函数贝壳自己在实际应用中都从未使用过. 但当我们已经会渔了还用担心鱼吗!？ BTW:贝壳假设你已经掌了基本的JavaScript运用能力及基础的CSS知识. JQuery是什么 JQuery只是一个JS文件人对新鲜事业总是报着好奇与排斥的情感,贝壳刚开始学的时...

jquery 简单的图片展示效果

标签： Web开发

html head titlejquery练习——简单的图片结果展示效果--cnblogs libsource//title style #cfoot ul,#cfoot li{ margin:0;padding:0;list-style-type:none; } #cdiv{ width:500px;height:500px;line-height:500px;text-align:center;border:1px solid #D5DDF9;margin:30px;float:left; } #cfoot li{ display:inline-block;width:100px;height:1...

jquery checkbox全选反选效果代码

标签： Web开发

运行后查看效果，需要刷新下。 !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd" html xmlns="http://www.w3.org/1999/xhtml" head titlejquery事件2/title script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"/scrip...

查看更多精彩>>