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 继承详解(四)
Jul 13 Javascript
分享一个自己写的table表格排序js插件(高效简洁)
Oct 29 Javascript
javascript中负数算术右移、逻辑右移的奥秘探索
Oct 17 Javascript
使用js声明数组,对象在jsp页面中(获得ajax得到json数据)
Nov 05 Javascript
js中直接声明一个对象的方法
Aug 10 Javascript
javascript判断变量是否有值的方法
Apr 20 Javascript
微信小程序 引入es6 promise
Apr 12 Javascript
vue的传参方式汇总和router使用技巧
May 22 Javascript
element-ui 的el-button组件中添加自定义颜色和图标的实现方法
Oct 26 Javascript
如何在postman中添加cookie信息步骤解析
Jun 30 Javascript
Vue表单提交点击事件只允许点击一次的实例
Oct 23 Javascript
vant 中van-list的用法说明
Nov 11 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中使用Imagick实现图像直方图的实现代码
2011/08/30 PHP
php eval函数用法 PHP中eval()函数小技巧
2012/10/31 PHP
PHP简单留言本功能实现代码
2017/06/09 PHP
php实现批量上传数据到数据库(.csv格式)的案例
2017/06/18 PHP
浅谈PHP中pack、unpack的详细用法
2018/03/12 PHP
Javascript 两个窗体之间传值实现代码
2009/09/25 Javascript
javascript实现详细时间提醒信息效果的方法
2015/03/11 Javascript
JavaScript知识点总结(五)之Javascript中两个等于号(==)和三个等于号(===)的区别
2016/05/31 Javascript
JS实现的相册图片左右滚动完整实例
2016/11/23 Javascript
angular实现商品筛选功能
2017/02/01 Javascript
jQuery中ajax获取数据赋值给页面的实例
2017/12/31 jQuery
layui 动态设置checbox 选中状态的例子
2019/09/02 Javascript
js通过循环多张图片实现动画效果
2019/12/19 Javascript
vue和小程序项目中使用iconfont的方法
2020/05/19 Javascript
vue 解决兄弟组件、跨组件深层次的通信操作
2020/07/27 Javascript
谈谈JavaScript中的函数
2020/09/08 Javascript
python动态加载变量示例分享
2014/02/17 Python
python 中文件输入输出及os模块对文件系统的操作方法
2018/08/27 Python
python标记语句块使用方法总结
2019/08/05 Python
手写一个python迭代器过程详解
2019/08/27 Python
python实现ip地址的包含关系判断
2020/02/07 Python
Python 之 Json序列化嵌套类方式
2020/02/27 Python
django Layui界面点击弹出对话框并请求逻辑生成分页的动态表格实例
2020/05/12 Python
基于Python实现简单学生管理系统
2020/07/24 Python
利用python清除移动硬盘中的临时文件
2020/10/28 Python
CSS中的字体大小设置属性总结
2016/05/24 HTML / CSS
HTML5验证以及日期显示的实现详解
2013/07/05 HTML / CSS
Troy-Bilt官网:草坪割草机、吹雪机、分蘖机等
2019/02/19 全球购物
Richards网上商店:当代时尚,遍布巴西
2019/11/03 全球购物
大学生学习2014全国两会心得体会
2014/03/13 职场文书
百年校庆节目主持词
2014/03/27 职场文书
诚信承诺书模板
2014/05/26 职场文书
2015年八一建军节演讲稿
2015/03/19 职场文书
区域销售经理岗位职责
2015/04/02 职场文书
搞笑婚礼主持词开场白
2015/11/24 职场文书
PostgreSQL聚合函数介绍以及分组和排序
2022/04/12 PostgreSQL