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 相关文章推荐
PJBlog插件 防刷新的在线播放器
Oct 25 Javascript
利用javascript实现一些常用软件的下载导航
Aug 03 Javascript
让table变成exls的示例代码
Mar 24 Javascript
javascript实现确定和取消提示框效果
Jul 10 Javascript
JavaScript常用基础知识强化学习
Dec 09 Javascript
浅谈angularJS中的事件
Jul 12 Javascript
JS中使用DOM来控制HTML元素
Jul 31 Javascript
详解Vue.js——60分钟组件快速入门(上篇)
Dec 05 Javascript
AngularJS实现表格的增删改查(仅限前端)
Jul 04 Javascript
vue.js template模板的使用(仿饿了么布局)
Aug 13 Javascript
Layui之table中的radio在切换分页时无法记住选中状态的解决方法
Sep 02 Javascript
vue项目使用.env文件配置全局环境变量的方法
Oct 24 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
多文件上载系统完整版
2006/10/09 PHP
php的memcached客户端memcached
2011/06/14 PHP
PHP的魔术常量__METHOD__简介
2014/07/08 PHP
yii实现CheckBox复选框在同一行显示的方法
2014/12/03 PHP
php序列化函数serialize() 和 unserialize() 与原生函数对比
2015/05/08 PHP
基于PHPexecl类生成复杂的报表表头示例
2016/10/14 PHP
laravel框架模型和数据库基础操作实例详解
2020/01/25 PHP
php封装的page分页类完整实例代码
2020/02/01 PHP
如何确保JavaScript的执行顺序 之jQuery.html并非万能钥匙
2011/03/03 Javascript
javascript实现动态侧边栏代码
2014/02/19 Javascript
javascript中Date对象的使用总结
2016/11/21 Javascript
JavaScript获取ul中li个数的方法
2017/02/13 Javascript
angularjs过滤器--filter与ng-repeat配合有奇效
2017/04/20 Javascript
nodejs同步调用获取mysql数据时遇到的大坑
2019/03/02 NodeJs
vue实现倒计时获取验证码效果
2020/04/17 Javascript
JS实现的定时器展示简单秒表、页面弹框及跳转操作完整示例
2020/01/26 Javascript
vue-drag-chart 拖动/缩放图表组件的实例代码
2020/04/10 Javascript
JavaScript逻辑运算符相关总结
2020/09/04 Javascript
openlayers实现地图弹窗
2020/09/25 Javascript
python采用getopt解析命令行输入参数实例
2014/09/30 Python
Python中的赋值、浅拷贝、深拷贝介绍
2015/03/09 Python
python遍历数组的方法小结
2015/04/30 Python
Python基于回溯法子集树模板解决找零问题示例
2017/09/11 Python
使用numpy和PIL进行简单的图像处理方法
2018/07/02 Python
Python中的random.uniform()函数教程与实例解析
2019/03/02 Python
Python编写一个验证码图片数据标注GUI程序附源码
2019/12/09 Python
公司财务总监岗位职责
2013/12/14 职场文书
大学校园生活自我鉴定
2014/01/13 职场文书
超市中秋节活动方案
2014/02/12 职场文书
信用卡结清证明怎么写
2014/09/13 职场文书
2015年党员个人剖析材料
2014/12/18 职场文书
宾馆前台接待岗位职责
2015/04/02 职场文书
汽车销售员岗位职责
2015/04/11 职场文书
收入证明范本
2015/06/12 职场文书
《黄山奇石》教学反思
2016/02/18 职场文书
Idea连接MySQL数据库出现中文乱码的问题
2021/04/14 MySQL