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 相关文章推荐
了不起的node.js读书笔记之node.js中的特性
Dec 22 Javascript
JavaScript中的eval()函数使用介绍
Dec 31 Javascript
js使用DOM操作实现简单留言板的方法
Apr 10 Javascript
[Bootstrap-插件使用]Jcrop+fileinput组合实现头像上传功能实例代码
Dec 20 Javascript
js实现点击按钮弹出上传文件的窗口
Dec 23 Javascript
javascript实现数据双向绑定的三种方式小结
Mar 09 Javascript
Linux CentOS系统下安装node.js与express的方法
Apr 01 Javascript
详解JS数值Number类型
Feb 07 Javascript
用JS实现根据当前时间随机生成流水号或者订单号
May 31 Javascript
js实现敏感词过滤算法及实现逻辑
Jul 24 Javascript
JavaScript中var的重要性实例分析
Jul 09 Javascript
vue 实现input表单元素的disabled示例
Oct 28 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+MySQL5.0中文乱码解决方法
2006/11/20 PHP
windows7下php开发环境搭建图文教程
2015/01/06 PHP
基于php双引号中访问数组元素报错的解决方法
2018/02/01 PHP
PHP获取日期对应星期、一周日期、星期开始与结束日期的方法
2018/06/22 PHP
PHP利用递归函数实现无限级分类的方法
2019/03/22 PHP
thinkPHP事务操作简单案例分析
2019/10/17 PHP
jquery 如何动态添加、删除class样式方法介绍
2012/11/07 Javascript
密码强度检测效果实现原理与代码
2013/01/04 Javascript
JS 实现Json查询的方法实例
2013/04/12 Javascript
jquery 触发a链接点击事件解决方案
2013/05/02 Javascript
JQuery each打印JS对象的方法
2013/11/13 Javascript
JQuery+Ajax无刷新分页的实例代码
2014/02/08 Javascript
JS+CSS模拟可以无刷新显示内容的留言板实例
2015/03/03 Javascript
jquery实现的缩略图预览滑块实例
2015/06/25 Javascript
JS实现带提示的星级评分效果完整实例
2015/10/30 Javascript
浅谈js原生拖放
2016/11/21 Javascript
详谈js中数组(array)和对象(object)的区别
2017/02/27 Javascript
vue-router路由懒加载和权限控制详解
2017/12/13 Javascript
Vue.js@2.6.10更新内置错误处机制Fundebug同步支持相应错误监控
2019/05/13 Javascript
vue分页插件的使用方法
2019/12/25 Javascript
vue实现自定义多选按钮
2020/07/16 Javascript
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
2020/07/18 Javascript
[08:08]2014DOTA2国际邀请赛中国区预选赛精彩TOPPLAY
2014/06/25 DOTA
Python之eval()函数危险性浅析
2014/07/03 Python
Python实现图片尺寸缩放脚本
2018/03/10 Python
tensorflow学习笔记之mnist的卷积神经网络实例
2018/04/15 Python
python存储16bit和32bit图像的实例
2018/12/05 Python
python文件转为exe文件的方法及用法详解
2019/07/08 Python
Python Django 封装分页成通用的模块详解
2019/08/21 Python
Python数据可视化:箱线图多种库画法
2019/11/06 Python
浅谈tensorflow中Dataset图片的批量读取及维度的操作详解
2020/01/20 Python
python 动态渲染 mysql 配置文件的示例
2020/11/20 Python
荣耀俄罗斯官网:HONOR俄罗斯
2020/10/31 全球购物
感恩母亲节活动方案
2014/03/04 职场文书
2015大学生自我评价范文
2015/03/03 职场文书
进阶篇之linux环境下安装MySQL数据库
2022/04/09 MySQL