jQuery AnythingSlider滑动效果插件

2016-02-19 14:13 23 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代码：

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

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

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

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

jQuery formValidator表单验证插件开源了含API帮助、

标签： Web开发

2008-07-22 14:47 bug描述:ajaxValidator函数在提交后发生错误，停留在本页面后,再次触发校验会让提示内容一直处于onload状态。这个bug已经修复，请重新下载。 2008/7/17 14:12:00 jQuery formValidator 3.1ver 1、为inputValidator增加empty属性。用于设置控件文本值是否允许两边为空。具体请看demo1里的密码的校验代码。该...

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 学习笔记（二）

标签： Web开发

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

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

标签： Web开发

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

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...

查看更多精彩>>