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 相关文章推荐
prototype与jquery下Ajax实现的差别
Sep 13 Javascript
Javascript 中介者模式实例
Dec 16 Javascript
基于JQuery的访问WebService的代码(可访问Java[Xfire])
Nov 19 Javascript
Javascript模块化编程(三)require.js的用法及功能介绍
Jan 17 Javascript
javascript自然分类法算法实现代码
Oct 11 Javascript
javascript获取flash版本号的方法
Nov 20 Javascript
JS中处理时间之setUTCMinutes()方法的使用
Jun 12 Javascript
Bootstrap Table 搜索框和查询功能
Nov 30 Javascript
vuejs简单验证码功能完整示例
Jan 08 Javascript
JS实现的简单tab切换功能完整示例
Jun 20 Javascript
Vue3.x源码调试的实现方法
Oct 13 Javascript
Element el-button 按钮组件的使用详解
Feb 01 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开发需要注意的安全问题
2010/09/01 PHP
深入php socket的讲解与实例分析
2013/06/13 PHP
PHP简单实现“相关文章推荐”功能的方法
2014/07/19 PHP
PHP模拟asp中response类实现方法
2015/08/08 PHP
IE与Firefox下javascript getyear年份的兼容性写法
2007/12/20 Javascript
JavaScript onkeydown事件入门实例(键盘某个按键被按下)
2014/10/17 Javascript
常用Javascript函数与原型功能收藏(必看篇)
2016/10/09 Javascript
通过修改360抢票的刷新频率和突破8车次限制实现方法
2017/01/04 Javascript
Angular 4 依赖注入学习教程之FactoryProvider的使用(四)
2017/06/04 Javascript
jquery获取file表单选择文件的路径、名字、大小、类型
2019/01/18 jQuery
layui select 禁止点击的实现方法
2019/09/05 Javascript
Javascript幻灯片播放功能实现过程解析
2020/05/07 Javascript
JS的时间格式化和时间戳转换函数示例详解
2020/07/27 Javascript
解决vue项目中某一页面不想引用公共组件app.vue的问题
2020/08/14 Javascript
在vue中嵌入外部网站的实现
2020/11/13 Javascript
ES6学习教程之Promise用法详解
2020/11/22 Javascript
[01:10]DOTA2英雄背景故事第四期之混沌法则混沌骑士
2020/07/16 DOTA
[01:28:44]DOTA2-DPC中国联赛定级赛 RNG vs iG BO3第一场 1月10日
2021/03/11 DOTA
解析Python中的异常处理
2015/04/28 Python
Python生成不重复随机值的方法
2015/05/11 Python
Ubuntu安装Jupyter Notebook教程
2017/10/18 Python
Python连接Mssql基础教程之Python库pymssql
2018/09/16 Python
Python通过两个dataframe用for循环求笛卡尔积
2020/04/29 Python
Python pip使用超时问题解决方案
2020/08/03 Python
中外合拍动画首获奥斯卡提名,“上海出品”《飞奔去月球》能否拿下最终大奖?
2021/03/16 国漫
锐步英国官网:Reebok英国
2019/11/29 全球购物
金融专业推荐信
2013/11/14 职场文书
运输服务质量承诺书
2014/03/27 职场文书
学校食品安全实施方案
2014/06/14 职场文书
房地产经营管理专业自荐信
2014/09/02 职场文书
教学改革问题查摆整改措施
2014/09/27 职场文书
超级礼物观后感
2015/06/15 职场文书
话题作文之呼唤
2019/12/18 职场文书
Vue接口封装的完整步骤记录
2021/05/14 Vue.js
css中z-index: 0和z-index: auto的区别
2021/08/23 HTML / CSS
Mysql数据库group by原理详解
2022/07/07 MySQL