AnySlider:适用于任何Html内容的jQuery Slider插件

时间: 2019-09-08阅读: 49标签: 插件

任何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:是否启用在幻灯片之间滑动的功能。

  

链接: http://www.fly63.com/article/detial/5268

jquery.nicescroll滚动条美化插件

今天给大家介绍一个滚动条美化插件jquery.nicescroll,这个插件有以下一个主意事项:兼容所有最新的桌面浏览器和旧版:Chrome,Firefox,Edge,IE8 +,Safari(win / mac),Opera

用webpack发布一个vue插件包

先到npm官网上注册一通,然后npm login,顺利的登录了,再运行npm publish,然后报错:只有管理员可以发布此模块,上网查了之后说是npm镜像的问题,不能用淘宝镜像,于是就安装了nrm专门用于切换镜像

解决游览器安装Vue.js devtools插件无效的问题

打开自己写的一个vue.js网页,发现图标并没有亮起来,还是灰色;打开自己写的一个vue.js网页,游览器上图标有了 ,但是控制台不显示;解决方案:

基于Vue的验证码插件vue2-verify

在我们Web项目开发中,验证码是一种比较常见的区分用户是计算机还是人的手段。主要是为了保证项目的安全。现在Vue开发的项目很多,基本都是前后端分离的。给大家推荐一个基于Vue比较好用的验证码插件vue2-verify。但是大家要注意一点

video.js使用技巧

Video.js初始化有两种方式;一种是在<video>标签里面加上。注意,两者缺一不可。刚开始的时候我觉得后面的值为空对象{},不放也行,导致播放器加载不出来,后来加上来就可以了。

关于 tapable 你需要知道这些

在阅读 webpack 前如果不了解 tapable 的话,很有可能会看得云里雾里,那么 tapable 到底是什么,又有什么用呢?本文主要介绍 tapable 的使用以及相关实现,通过学习 tapable 能够进一步的了解 webpack 的插件机制

实现一个vue-router插件

要想自己实现一个vue-router插件,就必须先了解一下vue-router插件的基本使用,我们在使用vue-router的时候,通常会定义一个router.js文件,里面主要就是干了以下几件事:

babel里transform-runtime插件的作用

ransform-runtime 是为了方便使用 babel-runtime 的,它会分析我们的 ast 中,是否有引用 babel-rumtime 中的垫片(通过映射关系),如果有,就会在当前模块顶部插入我们需要的垫片。transform-runtime 是利用 plugin

Bootstrap Table插件自定义排序使用方法

Bootstrap Table 插件含有样式的数据如何排序,如下面的字段stargazers_count;第一种方式:增加加样式之前的额外字段,如增加stargazers_count1 字段,并设置data-sort-name=stargazers_count1

使用jquery-intro插件做页面引导

设置参数: 设置多个格式 json格式:key:value 可设置参数;下载jquery-intro;设置方法(多个参数设置);在页面中引用jquery-intro;定义引用的区块;配置jquery-intro的显示

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全