任何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. testNG 预期异常、忽略测试、超时测试

    通过@Test 注解的参数值实现如下的几种测试 一.通过 @Test(expectedExceptions=异常类名) 参数实现到达 预期指定的异常效果 @Test(expectedException ...

  2. Springboot:整合Mybaits和Druid【监控】(十一)

    MyBatis默认提供了一个数据库连接池PooledDataSource,在此我们使用阿里提供的Druid数据库连接池 项目下载:https://files.cnblogs.com/files/app ...

  3. Linux网络编程(2)

    Preview 基于上一篇博客,本文将继续展开TCP面向连接的,客户端以及服务端各自需要进行的操作,我们按照真实TCP连接的顺序,分别阐述客户端socket(), connect()以及服务端sock ...

  4. python 利用numpy同时打乱列表的顺序,同时打乱数据和标签的顺序

    可用于网络训练打乱训练数据个标签,不改变对应关系 方法一: np.random.shuffle (无返回值,直接打乱原列表) state = np.random.get_state() np.rand ...

  5. docker(2)

    docker三大核心组件的概念 1镜像: Docker 镜像类似于虚拟机镜像,可以将它理解为一个只读的模板.例如,一个镜像可以包含一个基本的操作系统环境,里面仅安装了 Apache 应用程序(或用户需 ...

  6. Inno Setup 添加版权信息

    [Setup]AppCopyright=Copyright (C) - My Company, Inc. 有以上一句,即可在右键 --> Property --> Details 里看见版 ...

  7. 异常:由 spring-session pom 引发

    错误异常 Correct the classpath of your application so that it contains a single, compatible version of o ...

  8. vue2.x学习笔记(二十九)

    接着前面的内容:https://www.cnblogs.com/yanggb/p/12682822.html. 路由 官方路由 对于大多数的单页面应用,都推荐使用官方支持的vue-router库. 从 ...

  9. Centos下安装Docker,并配置国内docker源

    Centos下安装Docker 替换为国内的yum源(可选): mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.re ...

  10. 14.在Python中lambda函数是什么

    在Python中lambda函数是什么? It is a single expression anoymous function often used as inline function. lamb ...