适用于任何Html内容的jQuery Slider插件 - AnySlider
任何Slider都是一个易于使用且支持触摸的jQuery插件,允许您为任何html内容创建可自定义的滑块,如图像,文本,视频等。
特征:
- 重量轻,易于使用
- 支持键盘导航
- 使用淡入淡出或幻灯片过渡以及自定义缓动
- 支持自动播放
- 有很多选项可以自定义您自己的滑块
基本用法:
1.标记html结构
<div class="slider-wrapper"><font></font>
<div class="slider" id="slider"> <font></font>
<span> Content 1 </span><font></font>
<section> Content2 </section><font></font>
<div> Content 3</div><font></font>
</div><font></font>
</div>
2.在页面上包含jQuery库和jQuery AnySlider
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <font></font>
<script src="jquery.anyslider.js"></script>
3.包含缓动插件以缓解效果
<script src="jquery.easing.1.3.js"></script>
4.包含jQuery AnySlider CSS来设置滑块的样式
<link rel="stylesheet" href="jquery-anyslider.css">
5.使用默认选项调用插件
$(document).ready(function () {<font></font>
$('#slider').AnySlider();<font></font>
});
6.所有默认选项。
afterChange: function () {}
:每次幻灯片更改后调用的函数。afterSetup: function () {}
:设置滑块后调用的函数。animation: 'slide'
:滑动或褪色beforeChange: function () {}
:每次幻灯片更改前调用的函数。easing: 'swing'
:缓解选项。样式名称在jquery.easing.1.3.js里interval: 5000
:每张幻灯片上暂停的毫秒数。将此选项设置为0将禁用自动播放。keyboard: true
:允许使用向左和向右箭头键进行键盘导航。nextLabel: 'Next slide'
:标签为下一个按钮。pauseOnHover: true
:在悬停时暂停自动播放prevLabel: 'Previous slide'
:prev键的标签。reverse: false
:启用自动播放时是否从右向左滑动而不是从左向右滑动。showBullets: true
:是否显示导航子弹。将此设置为false将阻止子弹被绘制。showControls: true
:显示/隐藏控件。将此设置为false将阻止控件的绘制。speed: 400
:动画时间(以毫秒为单位)。将此选项设置为0将禁用动画。startSlide: 1
:起始幻灯片的编号。touch: true
:是否启用在幻灯片之间滑动的功能。
适用于任何Html内容的jQuery Slider插件 - AnySlider的更多相关文章
- 基于Bootstrap的炫酷jQuery slider插件
简要教程 这是一款在原生bootstrap slider的基础上制作效果非常炫酷的jQuery slider插件.该slider插件可以自定义slider的颜色.形状.透明度和tooltip等属性,美 ...
- jQuery 的插件 dataTables
---恢复内容开始--- jQuery 的插件 dataTables 是一个优秀的表格插件,提供了针对表格的排序.浏览器分页.服务器分页.筛选.格式化等功能.dataTables 的网站上也提供了大量 ...
- 推荐一个内容滚动jquery插件
myslider是一个内容滚动jquery插件,版本0.1.2的每次滚动内容是一行内容,可以是文字,可以是一个链接,还可以是图片. 官方网址:http://keleyi.com/jq/myslider ...
- jQuery.smoove — jQuery和CSS3炫酷滚动页面内容元素动画特效插件
插件介绍: jQuery-smoove是一款jQuery和CSS3炫酷滚动页面内容元素动画特效插件.该内容元素动画插件在页面滚动到指定位置时,该位置的HTML元素会执行指定的CSS3动画特效,如旋转. ...
- 使用jQuery.form插件,实现完美的表单异步提交
传送门:异步编程系列目录…… 时间真快,转眼一个月快结束了,一个月没写博客了!手开始生了,怎么开始呢…… 示例下载:使用jQuery.form插件,实现完美的表单异步提交.rar 月份的尾巴,今天的主 ...
- Glide.js:响应式 & 触摸友好的 jQuery 滑块插件
Glide.js 是一款响应式和对触摸友好的 jQuery 滑块.基于 CSS3 转换实现,并在低版本浏览器降级处理.Glide.js 简单,重量轻,快速,适用于智能手机,平板电脑和台式机.它支持 s ...
- MBB类似jquery.bxslider插件轮播效果
首先,如图一:当打开页面是,产品出现了淡入淡出切换轮播状态,当鼠标点击左边的小图时,就会切换出相对应的大图,当鼠标移开的时候,这个轮播就会停止自动轮播,只有人工手动才能进行切换:是一个不错的体验! 如 ...
- 批发网加盟页面轮播Jquery jcarousellite插件效果
Jquery jcarousellite 插件的好处 其中: 参数说明: btnPrev string 上一个按钮的class名, 比如 btnPrev: ".prev" ...
- 15个带示例的jQuery滚动条插件
1.NiceScroll:可用于桌面.移动与触摸设备的jQuery滚动插件 NiceScroll是一个jQuery插件(since 1.5),它有着类似于ios/移动设备的样式.它支持Div.iFra ...
随机推荐
- testNG 预期异常、忽略测试、超时测试
通过@Test 注解的参数值实现如下的几种测试 一.通过 @Test(expectedExceptions=异常类名) 参数实现到达 预期指定的异常效果 @Test(expectedException ...
- Springboot:整合Mybaits和Druid【监控】(十一)
MyBatis默认提供了一个数据库连接池PooledDataSource,在此我们使用阿里提供的Druid数据库连接池 项目下载:https://files.cnblogs.com/files/app ...
- Linux网络编程(2)
Preview 基于上一篇博客,本文将继续展开TCP面向连接的,客户端以及服务端各自需要进行的操作,我们按照真实TCP连接的顺序,分别阐述客户端socket(), connect()以及服务端sock ...
- python 利用numpy同时打乱列表的顺序,同时打乱数据和标签的顺序
可用于网络训练打乱训练数据个标签,不改变对应关系 方法一: np.random.shuffle (无返回值,直接打乱原列表) state = np.random.get_state() np.rand ...
- docker(2)
docker三大核心组件的概念 1镜像: Docker 镜像类似于虚拟机镜像,可以将它理解为一个只读的模板.例如,一个镜像可以包含一个基本的操作系统环境,里面仅安装了 Apache 应用程序(或用户需 ...
- Inno Setup 添加版权信息
[Setup]AppCopyright=Copyright (C) - My Company, Inc. 有以上一句,即可在右键 --> Property --> Details 里看见版 ...
- 异常:由 spring-session pom 引发
错误异常 Correct the classpath of your application so that it contains a single, compatible version of o ...
- vue2.x学习笔记(二十九)
接着前面的内容:https://www.cnblogs.com/yanggb/p/12682822.html. 路由 官方路由 对于大多数的单页面应用,都推荐使用官方支持的vue-router库. 从 ...
- Centos下安装Docker,并配置国内docker源
Centos下安装Docker 替换为国内的yum源(可选): mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.re ...
- 14.在Python中lambda函数是什么
在Python中lambda函数是什么? It is a single expression anoymous function often used as inline function. lamb ...