适用于任何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 ...
随机推荐
- leetcode-0543 二叉树的直径
题目地址https://leetcode-cn.com/problems/diameter-of-binary-tree/ 递归+BFS(暴力解法) 我们可以考虑在每个节点时,都去计算该节点左子树和右 ...
- 详细分析Redis的持久化操作——RDB与AOF
一.前言 由于疫情的原因,学校还没有开学,这也就让我有了很多的时间.趁着时间比较多,我终于可以开始学习那些之前一直想学的技术了.最近这几天开始学习Redis,买了本<Redis实战>, ...
- Serlvet容器与Web应用
对启动顺序的错误认识 之前一直有个观点,应用运行在Servlet容器中,因为从Servlet容器与Web应用的使用方式来看,确实很有这种感觉. 我们每次都是启动Servlet容器,然后再启动我们的应用 ...
- pytorch GPU训练好的模型使用CPU加载
torch.load('tensors.pt') # 把所有的张量加载到CPU中 torch.load('tensors.pt', map_location=lambda storage, loc: ...
- JavaScript type="text/template"的用法
JavaScript type="text/template"相当于定义一个模板,如果没有使用html()方法的话,是显示不出来的,我们直接看例子(我是在tp框架的里面写的) &l ...
- 安卓微信浏览器中window.location.href失效的问题
最近接手一微信项目,测试功能时,发现跳转在android手机上不动了.iso系统可以正常跳转的.解决方法: window.location.href = url + '?v=' + (new Date ...
- python学习14集合
'''''''''集合:set1.定义:是一个无序的不重复元素序列.2.表示:大括号 { } 或者 set() 函数创建集合,注意:创建一个空集合必须用 set() 而不是 { },因为 { } 是用 ...
- fail-safe fail-fast知多少
目录 简介 Fail-fast Iterator Fail-fast 的原理 Fail-safe Iterator 总结 fail-safe fail-fast知多少 简介 我们在使用集合类的时候,通 ...
- 利用requests, beautifulsoup包爬取股票信息网站
这是第一次用requests, beautifulsoup实现爬虫,此次爬取的是一个股票信息网站:http://www.gupiaozhishi.net.cn. 实现非常简单,只是为了demo使用的数 ...
- 面试题总结-Java部分
1 集合 1.1 hashmap原理 HashMap是基于哈希表实现的,每一个元素是一个key-value对,实现了Serializable.Cloneable接口,允许使用null值和null键.不 ...