任何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的更多相关文章

  1. 基于Bootstrap的炫酷jQuery slider插件

    简要教程 这是一款在原生bootstrap slider的基础上制作效果非常炫酷的jQuery slider插件.该slider插件可以自定义slider的颜色.形状.透明度和tooltip等属性,美 ...

  2. jQuery 的插件 dataTables

    ---恢复内容开始--- jQuery 的插件 dataTables 是一个优秀的表格插件,提供了针对表格的排序.浏览器分页.服务器分页.筛选.格式化等功能.dataTables 的网站上也提供了大量 ...

  3. 推荐一个内容滚动jquery插件

    myslider是一个内容滚动jquery插件,版本0.1.2的每次滚动内容是一行内容,可以是文字,可以是一个链接,还可以是图片. 官方网址:http://keleyi.com/jq/myslider ...

  4. jQuery.smoove — jQuery和CSS3炫酷滚动页面内容元素动画特效插件

    插件介绍: jQuery-smoove是一款jQuery和CSS3炫酷滚动页面内容元素动画特效插件.该内容元素动画插件在页面滚动到指定位置时,该位置的HTML元素会执行指定的CSS3动画特效,如旋转. ...

  5. 使用jQuery.form插件,实现完美的表单异步提交

    传送门:异步编程系列目录…… 时间真快,转眼一个月快结束了,一个月没写博客了!手开始生了,怎么开始呢…… 示例下载:使用jQuery.form插件,实现完美的表单异步提交.rar 月份的尾巴,今天的主 ...

  6. Glide.js:响应式 & 触摸友好的 jQuery 滑块插件

    Glide.js 是一款响应式和对触摸友好的 jQuery 滑块.基于 CSS3 转换实现,并在低版本浏览器降级处理.Glide.js 简单,重量轻,快速,适用于智能手机,平板电脑和台式机.它支持 s ...

  7. MBB类似jquery.bxslider插件轮播效果

    首先,如图一:当打开页面是,产品出现了淡入淡出切换轮播状态,当鼠标点击左边的小图时,就会切换出相对应的大图,当鼠标移开的时候,这个轮播就会停止自动轮播,只有人工手动才能进行切换:是一个不错的体验! 如 ...

  8. 批发网加盟页面轮播Jquery jcarousellite插件效果

    Jquery jcarousellite 插件的好处 其中: 参数说明: btnPrev     string 上一个按钮的class名, 比如  btnPrev: ".prev" ...

  9. 15个带示例的jQuery滚动条插件

    1.NiceScroll:可用于桌面.移动与触摸设备的jQuery滚动插件 NiceScroll是一个jQuery插件(since 1.5),它有着类似于ios/移动设备的样式.它支持Div.iFra ...

随机推荐

  1. leetcode-0543 二叉树的直径

    题目地址https://leetcode-cn.com/problems/diameter-of-binary-tree/ 递归+BFS(暴力解法) 我们可以考虑在每个节点时,都去计算该节点左子树和右 ...

  2. 详细分析Redis的持久化操作——RDB与AOF

    一.前言   由于疫情的原因,学校还没有开学,这也就让我有了很多的时间.趁着时间比较多,我终于可以开始学习那些之前一直想学的技术了.最近这几天开始学习Redis,买了本<Redis实战>, ...

  3. Serlvet容器与Web应用

    对启动顺序的错误认识 之前一直有个观点,应用运行在Servlet容器中,因为从Servlet容器与Web应用的使用方式来看,确实很有这种感觉. 我们每次都是启动Servlet容器,然后再启动我们的应用 ...

  4. pytorch GPU训练好的模型使用CPU加载

    torch.load('tensors.pt') # 把所有的张量加载到CPU中 torch.load('tensors.pt', map_location=lambda storage, loc: ...

  5. JavaScript type="text/template"的用法

    JavaScript type="text/template"相当于定义一个模板,如果没有使用html()方法的话,是显示不出来的,我们直接看例子(我是在tp框架的里面写的) &l ...

  6. 安卓微信浏览器中window.location.href失效的问题

    最近接手一微信项目,测试功能时,发现跳转在android手机上不动了.iso系统可以正常跳转的.解决方法: window.location.href = url + '?v=' + (new Date ...

  7. python学习14集合

    '''''''''集合:set1.定义:是一个无序的不重复元素序列.2.表示:大括号 { } 或者 set() 函数创建集合,注意:创建一个空集合必须用 set() 而不是 { },因为 { } 是用 ...

  8. fail-safe fail-fast知多少

    目录 简介 Fail-fast Iterator Fail-fast 的原理 Fail-safe Iterator 总结 fail-safe fail-fast知多少 简介 我们在使用集合类的时候,通 ...

  9. 利用requests, beautifulsoup包爬取股票信息网站

    这是第一次用requests, beautifulsoup实现爬虫,此次爬取的是一个股票信息网站:http://www.gupiaozhishi.net.cn. 实现非常简单,只是为了demo使用的数 ...

  10. 面试题总结-Java部分

    1 集合 1.1 hashmap原理 HashMap是基于哈希表实现的,每一个元素是一个key-value对,实现了Serializable.Cloneable接口,允许使用null值和null键.不 ...