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编程起步(第七课)
Jan 10 Javascript
精通Javascript系列之数值计算
Jun 07 Javascript
触屏中的JavaScript事件分析
Feb 06 Javascript
jQuery菜单插件用法实例
Jul 25 Javascript
JS模仿手机端九宫格登录功能实现代码
Apr 28 Javascript
深入理解JavaScript中的对象复制(Object Clone)
May 18 Javascript
vue2笔记 — vue-router路由懒加载的实现
Mar 03 Javascript
Angular2 父子组件数据通信实例
Jun 22 Javascript
JS+canvas实现的五子棋游戏【人机大战版】
Jul 19 Javascript
js HTML5 canvas绘制图片的方法
Sep 08 Javascript
vue 引入公共css文件的简单方法(推荐)
Jan 20 Javascript
使用Vue-Awesome-Swiper实现旋转叠加轮播效果&amp;平移轮播效果
Aug 16 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
分页显示Oracle数据库记录的类之一
2006/10/09 PHP
用PHP和ACCESS写聊天室(九)
2006/10/09 PHP
深入PHP nl2br()格式化输出的详解
2013/06/05 PHP
php判断数组元素中是否存在某个字符串的方法
2014/06/14 PHP
php常用字符串处理函数实例分析
2014/11/22 PHP
PHP7安装Redis扩展教程【Linux与Windows平台】
2016/09/30 PHP
PHP创建对象的六种方式实例总结
2019/06/27 PHP
Javascript结合css实现网页换肤功能
2009/11/02 Javascript
JS中toFixed()方法引起的问题如何解决
2012/11/20 Javascript
判断在css加载完毕后执行后续代码示例
2014/09/03 Javascript
使用递归遍历对象获得value值的实现方法
2016/06/14 Javascript
在Debian(Raspberry Pi)树莓派上安装NodeJS的教程详解
2017/09/19 NodeJs
浅析vue中常见循环遍历指令的使用 v-for
2018/04/18 Javascript
vue+Element实现搜索关键字高亮功能
2019/05/28 Javascript
Python cookbook(数据结构与算法)对切片命名清除索引的方法
2018/03/13 Python
Python中创建二维数组
2018/10/17 Python
Python OpenCV调用摄像头检测人脸并截图
2020/08/20 Python
Python绘制热力图示例
2019/09/27 Python
使用python切片实现二维数组复制示例
2019/11/26 Python
python自动化unittest yaml使用过程解析
2020/02/03 Python
pandas分组聚合详解
2020/04/10 Python
Django 如何使用日期时间选择器规范用户的时间输入示例代码详解
2020/05/22 Python
Python使用eval函数执行动态标表达式过程详解
2020/10/17 Python
基础的CSS3弹性盒Flexbox布局使用实例
2016/04/08 HTML / CSS
物业管理计划书
2014/01/10 职场文书
行政人事专员岗位职责
2014/03/05 职场文书
学历公证委托书
2014/04/09 职场文书
公司授权委托书范文
2014/08/02 职场文书
关于读书的活动方案
2014/08/14 职场文书
现场施工员岗位职责
2015/04/11 职场文书
兴趣班停课通知
2015/04/24 职场文书
收入证明范本
2015/06/12 职场文书
如何使用CocosCreator对象池
2021/04/14 Javascript
Python Pycharm虚拟下百度飞浆PaddleX安装报错问题及处理方法(亲测100%有效)
2021/05/24 Python
Python实现双向链表基本操作
2022/05/25 Python
在windows server 2012 r2中安装mysql的详细步骤
2022/07/23 Servers