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 相关文章推荐
JavaScript 实现??打印?理
Apr 28 Javascript
jQuery对Select的操作大集合(收藏)
Dec 28 Javascript
Jquery性能优化详解
May 15 Javascript
使用documentElement正确取得当前可见区域的大小
Jul 25 Javascript
jquery中EasyUI使用技巧小结
Feb 10 Javascript
Web前端新人笔记之jquery入门心得(新手必看)
May 17 Javascript
Node.js下自定义错误类型详解
Oct 17 Javascript
vue v-model表单控件绑定详解
May 17 Javascript
实例讲解JavaScript截取字符串
Nov 30 Javascript
element ui table(表格)实现点击一行展开功能
Dec 04 Javascript
vue+iview动态渲染表格详解
Mar 19 Javascript
javascript中导出与导入实现模块化管理教程
Dec 03 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
PHP的类 功能齐全的发送邮件类
2006/10/09 PHP
web站点获取用户IP的安全方法 HTTP_X_FORWARDED_FOR检验
2013/06/01 PHP
输入值/表单提交参数过滤有效防止sql注入的方法
2013/12/25 PHP
php加密算法之实现可逆加密算法和解密分享
2014/01/21 PHP
Codeigniter发送邮件的方法
2015/03/19 PHP
php的api数据接口书写实例(推荐)
2016/09/22 PHP
PHP有序表查找之二分查找(折半查找)算法示例
2018/02/09 PHP
总结PHP代码规范、流程规范、git规范
2018/06/18 PHP
如何制作浮动广告 JavaScript制作浮动广告代码
2012/12/30 Javascript
javascript Array 数组常用方法
2015/04/05 Javascript
jQuery()方法的第二个参数详解
2015/04/29 Javascript
浅谈Javascript数组的使用
2015/07/29 Javascript
jQuery多条件筛选如何实现
2015/11/04 Javascript
JavaScript Base64 作为文件上传的实例代码解析
2017/02/14 Javascript
详解Angular 自定义结构指令
2017/06/21 Javascript
JavaScript 复制对象与Object.assign方法无法实现深复制
2018/11/02 Javascript
vue响应式更新机制及不使用框架实现简单的数据双向绑定问题
2019/06/27 Javascript
[43:26]完美世界DOTA2联赛PWL S2 Forest vs Rebirth 第二场 11.20
2020/11/23 DOTA
Python函数中的函数(闭包)用法实例
2016/03/15 Python
python实现对象列表根据某个属性排序的方法详解
2019/06/11 Python
python3.x+pyqt5实现主窗口状态栏里(嵌入)显示进度条功能
2019/07/04 Python
Python实现最常见加密方式详解
2019/07/13 Python
python实现百度OCR图片识别过程解析
2020/01/17 Python
全球最大的在线旅游公司:Expedia
2017/11/16 全球购物
俄罗斯电子产品、计算机和家用电器购物网站:OLDI
2019/10/27 全球购物
校长岗位职责
2013/11/26 职场文书
自主招生自荐信范文
2013/12/04 职场文书
留学生如何写好自荐信
2013/12/27 职场文书
项目合作协议书
2014/04/16 职场文书
教师爱岗敬业演讲稿
2014/05/05 职场文书
护士节策划方案
2014/05/19 职场文书
医德医风自我评价2015
2015/03/03 职场文书
2015年暑期实践报告范文
2015/07/13 职场文书
雨雪天气温馨提示
2015/07/15 职场文书
《倍数和因数》教学反思
2016/02/23 职场文书
《杜鹃的婚约》OP主题曲「凸凹」无字幕影像公开
2022/04/08 日漫