jQuery插件slick实现响应式移动端幻灯片图片切换特效


Posted in Javascript onApril 12, 2015

jQuery响应式手机端移动端幻灯片图片切换特效插件slick,基于jQuery,功能非常强大,支持左右按钮切换、支持圆点切换、支持自定义切换数量,支持自定义切换速度、支持图片预加载、支持自动播放定义,效果非常的不错,众多的参数自定义支持,觉得可以的可以参考他们的参数配置,还是值得学习使用的。

jQuery插件slick实现响应式移动端幻灯片图片切换特效

使用方法:

1.加载插件和jQuery

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script> 
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script> 
<script type="text/javascript" src="slick/slick.js"></script> 
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>

2.HTML内容

<div class="slider fade"> 
<div><div class="image"><img src="img/fonz1.png"/></div></div> 
<div><div class="image"><img src="img/fonz2.png"/></div></div> 
<div><div class="image"><img src="img/fonz3.png"/></div></div> 
</div>

3.函数调用

<script type="text/javascript"> 
$(document).ready(function() { 
  $('.fade').slick({ 
    dots: true, 
    infinite: true, 
    speed: 500, 
    fade: true, 
    slide: 'div', 
    cssEase: 'linear' 
  }); 
}); 
</script>

查看DEMO   立即下载

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
超级简单的图片防盗(HTML),好用
Apr 08 Javascript
javascript Window及document对象详细整理
Jan 12 Javascript
各浏览器中querySelector和querySelectorAll的实现差异分析
May 23 Javascript
javascript新闻跑马灯实例代码
Jul 29 Javascript
jQuery数据检索中根据关键字快速定位GridView指定行的实现方法
Jun 08 Javascript
prototype.js常用函数详解
Jun 18 Javascript
JS HTML5实现拖拽移动列表效果
Aug 27 Javascript
jQuery图片前后对比插件beforeAfter用法示例【附demo源码下载】
Sep 20 Javascript
vue.js指令v-model实现方法
Dec 05 Javascript
JavaScript判断变量名是否存在数组中的实例
Dec 28 Javascript
对VUE中的对象添加属性
Sep 18 Javascript
如何基于viewport vm适配移动端页面
Nov 13 Javascript
jQuery表单美化插件jqTransform使用详解
Apr 12 #Javascript
jQuery插件PageSlide实现左右侧栏导航菜单
Apr 12 #Javascript
jQuery插件StickUp实现网页导航置顶
Apr 12 #Javascript
JavaScript 面向对象与原型
Apr 10 #Javascript
javascript基本包装类型介绍
Apr 10 #Javascript
javascript表格隔行变色加鼠标移入移出及点击效果的方法
Apr 10 #Javascript
js改变embed标签src值的方法
Apr 10 #Javascript
You might like
Discuz批量替换帖子内容的方法(使用SQL更新数据库)
2014/06/23 PHP
php+Mysqli利用事务处理转账问题实例
2015/02/11 PHP
PHP传参之传值与传址的区别
2015/04/24 PHP
浅析iis7.5安装配置php环境
2015/05/10 PHP
PHP表单提交后引号前自动加反斜杠的原因及三种办法关闭php魔术引号
2015/09/30 PHP
js+css在交互上的应用
2010/07/18 Javascript
Javascript实现CheckBox的全选与取消全选的代码
2010/07/20 Javascript
按给定几率进行随机抽取的js代码
2010/12/28 Javascript
基于JavaScript实现继承机制之构造函数方法对象冒充的使用详解
2013/05/07 Javascript
Javascript控制页面链接在新窗口打开具体方法
2013/08/16 Javascript
jQuery 绑定事件到动态创建的元素上的方法实例
2013/08/18 Javascript
JQuery插件Marquee.js实现无缝滚动效果
2016/04/26 Javascript
jquery解析XML及获取XML节点名称的实现代码
2016/05/18 Javascript
js当前页面登录注册框,固定div,底层阴影的实例代码
2016/10/04 Javascript
jquery获取easyui日期控件的值实现方法
2016/11/09 Javascript
Ajax异步获取html数据中包含js方法无效的解决方法
2017/02/20 Javascript
react.js 父子组件数据绑定实时通讯的示例代码
2017/09/25 Javascript
Vue导出json数据到Excel电子表格的示例
2017/12/04 Javascript
基于Vue 2.0的模块化前端 UI 组件库小结
2017/12/21 Javascript
p5.js码绘“跳动的小正方形”的实现代码
2019/10/22 Javascript
uniapp,微信小程序中使用 MQTT的问题
2020/07/11 Javascript
详解阿里Node.js技术文档之process模块学习指南
2021/01/04 Javascript
在Python中操作文件之truncate()方法的使用教程
2015/05/25 Python
Python使用os模块和fileinput模块来操作文件目录
2016/01/19 Python
深入学习python的yield和generator
2016/03/10 Python
python的pdb调试命令的命令整理及实例
2017/07/12 Python
利用Tkinter(python3.6)实现一个简单计算器
2017/12/21 Python
自动化专业毕业生自荐信
2013/11/01 职场文书
车贷收入证明范本
2014/01/09 职场文书
培训自我鉴定
2014/01/31 职场文书
总裁助理岗位职责
2014/02/17 职场文书
《沙漠中的绿洲》教学反思
2014/04/24 职场文书
学校领导干部民主生活会整改方案
2014/09/29 职场文书
法定代表人证明书
2014/11/28 职场文书
2016继续教育培训学习心得体会
2016/01/19 职场文书
小学毕业教师寄语
2019/06/21 职场文书