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 相关文章推荐
在Python中使用glob模块查找文件路径的方法
Jun 17 Javascript
如何实现移动端浏览器不显示 pc 端的广告
Oct 15 Javascript
JS组件Bootstrap Table表格行拖拽效果实现代码
Aug 27 Javascript
JavaScript数组合并的多种方法
May 22 Javascript
JS/jQ实现免费获取手机验证码倒计时效果
Jun 13 Javascript
JavaScript兼容浏览器FF/IE技巧
Aug 14 Javascript
jQuery纵向导航菜单效果实现方法
Dec 19 Javascript
Vue.js学习教程之列表渲染详解
May 17 Javascript
用js实现每隔一秒刷新时间的实例(含年月日时分秒)
Oct 25 Javascript
JS回调函数 callback的理解与使用案例分析
Sep 09 Javascript
Vue图片浏览组件v-viewer用法分析【支持旋转、缩放、翻转等操作】
Nov 04 Javascript
vue 动态创建组件的两种方法
Dec 31 Vue.js
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获取目录所有文件并将结果保存到数组(实例)
2013/10/25 PHP
smarty简单入门实例
2014/11/28 PHP
PHP简单判断字符串是否包含另一个字符串的方法
2016/03/25 PHP
php设计模式之备忘模式分析【星际争霸游戏案例】
2020/03/24 PHP
javascript学习笔记(三)BOM和DOM详解
2014/09/30 Javascript
javascript面向对象快速入门实例
2015/01/13 Javascript
js实现类似新浪微博首页内容渐显效果的方法
2015/04/10 Javascript
浅析javascript中的事件代理
2015/11/06 Javascript
探寻JavaScript中this指针指向
2016/04/23 Javascript
深入浅出ES6新特性之函数默认参数和箭头函数
2016/08/01 Javascript
VUE中使用Vue-resource完成交互
2017/07/21 Javascript
Windows下使用Nodejs运行js的方法
2017/09/02 NodeJs
过滤器vue.filters的使用方法实现
2019/09/18 Javascript
vue子组件改变父组件传递的prop值通过sync实现数据双向绑定(DEMO)
2020/02/01 Javascript
vue组件库的在线主题编辑器的实现思路
2020/04/03 Javascript
微信小程序整个页面的自动适应布局的实现
2020/07/12 Javascript
微信小程序自定义胶囊样式
2020/12/27 Javascript
[05:13]TI4 中国战队 机场出征!!
2014/07/07 DOTA
Python中集合类型(set)学习小结
2015/01/28 Python
Python基于scapy实现修改IP发送请求的方法示例
2017/07/08 Python
对python .txt文件读取及数据处理方法总结
2018/04/23 Python
python excel使用xlutils类库实现追加写功能的方法
2018/05/02 Python
python获取url的返回信息方法
2018/12/17 Python
python变量命名的7条建议
2019/07/04 Python
Python使用百度翻译开发平台实现英文翻译为中文功能示例
2019/08/08 Python
KEETSA环保床垫:更好的睡眠,更好的生活!
2016/11/24 全球购物
SIXPAD智能健身仪英国官网:革命性的训练装备品牌
2018/09/27 全球购物
英国网上自行车商店:Tredz Bikes
2019/10/29 全球购物
啤酒销售实习自我鉴定
2013/09/24 职场文书
2014信息公开实施方案
2014/02/22 职场文书
投资合作协议书
2014/04/17 职场文书
四川省传达学习贯彻党的群众路线教育实践活动总结大会精神新闻稿
2014/10/26 职场文书
党的群众路线教育实践活动先进个人材料
2014/12/24 职场文书
2015年安全月活动总结
2015/03/26 职场文书
2015年监理工作总结范文
2015/04/07 职场文书
基于Python实现西西成语接龙小助手
2022/08/05 Golang