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 相关文章推荐
JS实现的省份级联实例代码
Jun 24 Javascript
jQuery截取指定长度字符串的实现原理及代码
Jul 01 Javascript
在linux中使用包管理器安装node.js
Mar 13 Javascript
jquery淡入淡出效果简单实例
Jan 14 Javascript
Javascript中构造函数要注意的一些坑
Jan 23 Javascript
JS实现中国公民身份证号码有效性验证
Feb 20 Javascript
VueJs组件prop验证简单介绍
Sep 12 Javascript
JavaScript实现单例模式实例分享
Dec 22 Javascript
详解Vue开发微信H5微信分享签名失败问题解决方案
Aug 09 Javascript
微信小程序的线程架构【推荐】
May 14 Javascript
微信小程序图表插件wx-charts用法实例详解
May 20 Javascript
如何基于layui的laytpl实现数据绑定的示例代码
Apr 10 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 购物车实例(申精)
2009/05/11 PHP
解决PHP里大量数据循环时内存耗尽的方法
2015/10/10 PHP
php mysql PDO 查询操作的实例详解
2017/09/23 PHP
jqPlot Option配置对象详解
2009/07/25 Javascript
javascript拓展DOM操作 prependChild insertAfert
2010/11/17 Javascript
DIY jquery plugin - tabs标签切换实现代码
2010/12/11 Javascript
TextArea不支持maxlength的解决办法(jquery)
2011/09/13 Javascript
简易js代码实现计算器操作
2013/04/15 Javascript
chrome下jq width()方法取值为0的解决方法
2014/05/26 Javascript
jQuery中:last选择器用法实例
2014/12/30 Javascript
JavaScript时间转换处理函数
2015/04/14 Javascript
JavaScript中实现map功能代码分享
2015/06/11 Javascript
JavaScript遍历Json串浏览器输出的结果不统一问题
2016/11/03 Javascript
jQuery元素选择器实例代码
2017/02/06 Javascript
JavaScript的继承实现小结
2017/05/07 Javascript
Vue2.0子同级组件之间数据交互方法
2018/02/28 Javascript
JS中通过url动态获取图片大小的方法小结(两种方法)
2018/10/31 Javascript
关于layui的动态图标不显示的解决方法
2019/09/04 Javascript
JS实现骰子3D旋转效果
2019/10/24 Javascript
Python读写Redis数据库操作示例
2014/03/18 Python
Python基本语法经典教程
2016/03/11 Python
Python数据分析之获取双色球历史信息的方法示例
2018/02/03 Python
Python视频爬虫实现下载头条视频功能示例
2018/05/07 Python
Python多重继承的方法解析执行顺序实例分析
2018/05/26 Python
使用Django2快速开发Web项目的详细步骤
2019/01/06 Python
浅谈对pytroch中torch.autograd.backward的思考
2019/12/27 Python
python 字典item与iteritems的区别详解
2020/04/25 Python
canvas实现二维码和图片合成的示例代码
2018/08/01 HTML / CSS
国际旅客访问北美最大的汽车租赁提供商:Alamo Rent A Car
2018/06/13 全球购物
土耳其风格手工珠宝:Ottoman Hands
2019/07/26 全球购物
最新大学职业规划书范文
2013/12/30 职场文书
群众路线教育实践活动对照检查材料思想汇报(副处级领导)
2014/10/04 职场文书
团党委领导干部党的群众路线教育实践活动个人对照检查材料思想汇
2014/10/05 职场文书
2014年社区综治工作总结
2014/11/17 职场文书
2014年乡镇民政工作总结
2014/12/02 职场文书
预备党员表决心的话
2015/09/22 职场文书