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 Zifa FormValid 0.1表单验证 代码打包下载
Jun 08 Javascript
jquery Firefox3.5中操作select的问题
Jul 10 Javascript
文本框回车提交与禁止提交示例
Sep 27 Javascript
关于JavaScript限制字数的输入框的那些事
Aug 14 Javascript
AngularJS中过滤器的使用与自定义实例代码
Sep 17 Javascript
vue学习笔记之vue1.0和vue2.0的区别介绍
May 17 Javascript
浅谈es6语法 (Proxy和Reflect的对比)
Oct 24 Javascript
javaScript之split与join的区别(详解)
Nov 08 Javascript
微信小程序新手教程之启动页的重要性
Mar 03 Javascript
浅谈VUE中演示v-for为什么要加key
Jan 16 Javascript
Vue.js 中制作自定义选择组件的代码附演示demo
Feb 28 Javascript
解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题
Aug 14 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
destoon官方标签大全
2014/06/20 PHP
替换php字符串中的单引号为双引号的方法
2017/02/16 PHP
微信公众号开发之获取位置信息php代码
2018/06/13 PHP
php给数组赋值的实例方法
2019/09/26 PHP
js 数组实现一个类似ruby的迭代器
2009/10/27 Javascript
JS运行耗时操作的延时显示方法
2010/11/19 Javascript
JavaScript SetInterval与setTimeout使用方法详解
2013/11/15 Javascript
javascript中兼容主流浏览器的动态生成iframe方法
2014/05/05 Javascript
整理JavaScript对DOM中各种类型的元素的常用操作
2016/05/05 Javascript
Javascript 闭包详解及实例代码
2016/11/30 Javascript
JS数组排序方法实例分析
2016/12/16 Javascript
javascript 封装Date日期类实例详解
2017/05/28 Javascript
利用HBuilder打包前端开发webapp为apk的方法
2017/11/13 Javascript
django js 实现表格动态标序号的实例代码
2019/07/12 Javascript
微信小程序 子级页面返回父级并把子级参数带回父级实现方法
2019/08/22 Javascript
jQuery实现聊天对话框
2020/02/08 jQuery
[01:07:19]2018DOTA2亚洲邀请赛 4.5 淘汰赛 Mineski vs VG 第一场
2018/04/06 DOTA
Python创建文件和追加文件内容实例
2014/10/21 Python
Python脚本实现网卡流量监控
2015/02/14 Python
使用Python的Django框架结合jQuery实现AJAX购物车页面
2016/04/11 Python
Python采集猫眼两万条数据 对《无名之辈》影评进行分析
2018/12/05 Python
python 定时器,轮询定时器的实例
2019/02/20 Python
python 将字符串完成特定的向右移动方法
2019/06/11 Python
anaconda中更改python版本的方法步骤
2019/07/14 Python
python基于celery实现异步任务周期任务定时任务
2019/12/30 Python
python GUI库图形界面开发之PyQt5信号与槽基础使用方法与实例
2020/03/06 Python
Python使用pickle进行序列化和反序列化的示例代码
2020/09/22 Python
详解pycharm连接远程linux服务器的虚拟环境的方法
2020/11/13 Python
Hotels.com拉丁美洲:从豪华酒店到经济型酒店的预定优惠和折扣
2019/12/09 全球购物
DIY蛋糕店的创业计划书范文
2013/12/26 职场文书
影子教师研修方案
2014/06/14 职场文书
电子商务专业毕业生自荐书
2014/06/22 职场文书
敬老月活动总结
2014/08/28 职场文书
高中生逃课检讨书
2014/10/10 职场文书
2015年医德考评自我评价
2015/03/03 职场文书
Redis5之后版本的高可用集群搭建的实现
2021/04/27 Redis