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基于HTML5 canvas制作画箭头组件
Jun 25 Javascript
一个简单的jQuery计算器实现了连续计算功能
Jul 21 Javascript
鼠标悬浮停留三秒后自动显示大图js代码
Sep 09 Javascript
JavaScript实现更改网页背景与字体颜色的方法
Feb 02 Javascript
jQuery实现自定义checkbox和radio样式
Jul 13 Javascript
PhantomJS快速入门教程(服务器端的 JavaScript API 的 WebKit)
Aug 06 Javascript
JS简单实现表格排序功能示例
Dec 20 Javascript
原生js实现轮播图
Feb 27 Javascript
Bootstrap 模态对话框只加载一次 remote 数据的完美解决办法
Jul 09 Javascript
js微信分享实现代码
Oct 11 Javascript
ES6基础之 Promise 对象用法实例详解
Aug 22 Javascript
从零使用TypeScript开发项目打包发布到npm
Feb 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
新的一年,新的期待:DC在2020年的四部动画电影
2020/01/01 欧美动漫
用php将任何格式视频转为flv的代码
2009/09/03 PHP
PHP读取txt文本文件并分页显示的方法
2015/03/11 PHP
thinkphp5+layui实现的分页样式示例
2019/10/08 PHP
laravel执行php artisan migrate报错的解决方法
2019/10/09 PHP
关于PHP求解三数之和问题详析
2020/11/09 PHP
json简单介绍
2008/06/10 Javascript
JavaScript中使用replace结合正则实现replaceAll的效果
2010/06/04 Javascript
在多个页面使用同一个HTML片段的代码
2011/03/04 Javascript
js 高效去除数组重复元素示例代码
2013/12/19 Javascript
详解获取jq ul第一个li定位的四种解决方案
2016/11/23 Javascript
详解用node-images 打造简易图片服务器
2017/05/08 Javascript
Angular 实现输入框中显示文章标签的实例代码
2018/11/07 Javascript
[24:42]VP vs TNC Supermajor小组赛B组 BO3 第三场 6.2
2018/06/03 DOTA
跟老齐学Python之list和str比较
2014/09/20 Python
Python urllib、urllib2、httplib抓取网页代码实例
2015/05/09 Python
python数据结构之链表详解
2017/09/12 Python
pandas的唯一值、值计数以及成员资格的示例
2018/07/25 Python
Python解决线性代数问题之矩阵的初等变换方法
2018/12/12 Python
python之拟合的实现
2019/07/19 Python
Python Request爬取seo.chinaz.com百度权重网站的查询结果过程解析
2019/08/13 Python
pytorch 使用单个GPU与多个GPU进行训练与测试的方法
2019/08/19 Python
python 中Arduino串口传输数据到电脑并保存至excel表格
2019/10/14 Python
python中dict()的高级用法实现
2019/11/13 Python
python实现打砖块游戏
2020/02/25 Python
python中可以声明变量类型吗
2020/06/18 Python
树莓派升级python的具体步骤
2020/07/05 Python
python sleep和wait对比总结
2021/02/03 Python
成功的餐厅经营创业计划书
2014/01/15 职场文书
保险公司早会主持词
2014/03/22 职场文书
副总经理任命书
2014/06/05 职场文书
重阳节活动总结
2014/08/27 职场文书
领导离职感言
2015/08/03 职场文书
预备党员入党感想
2015/08/10 职场文书
导游词之湖州-太湖
2019/10/11 职场文书
tensorflow+k-means聚类简单实现猫狗图像分类的方法
2021/04/28 Python