16、jQuery插件之Slick幻灯片插件
2017-08-24 14:18
309 查看
简介
slick 是一个基于 jQuery 的幻灯片插件，具有以下特点：
支持响应式
浏览器支持 CSS3 时，则使用 CSS3 过度/动画
支持移动设备滑动
支持桌面浏览器鼠标拖动
支持循环
支持左右控制
支持动态添加、删除、过滤
支持自动播放、圆点、箭头、回调等等
兼容
浏览器兼容：兼容 IE7+ 及其他主流浏览器，若要兼容 IE7，需修改 CSS（slick.css）。
jQuery兼容：兼容 1.7 及以上版本。
接下来，我们开始写案例：
1、一张幻灯片，手动点击效果
代码:
2、多张幻灯片
代码:
3、响应式显示
PC端显示
手机端显示
代码:
4、一次一张
代码:
5、参差不齐的设置
6、中心大屏模式
7、懒惰加载
代码:
8、自动播放
代码：
9、淡入淡出
10、新增和移除幻灯片
11、过滤效果
下载：http://git.oschina.net/sensus/slickChaJianAnLi/tree/master
slick 是一个基于 jQuery 的幻灯片插件，具有以下特点：
支持响应式
浏览器支持 CSS3 时，则使用 CSS3 过度/动画
支持移动设备滑动
支持桌面浏览器鼠标拖动
支持循环
支持左右控制
支持动态添加、删除、过滤
支持自动播放、圆点、箭头、回调等等
兼容
浏览器兼容：兼容 IE7+ 及其他主流浏览器，若要兼容 IE7，需修改 CSS（slick.css）。
jQuery兼容：兼容 1.7 及以上版本。
参数
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| accessibility | 布尔值 | true | 启用Tab键和箭头键导航 |
| autoplay | 布尔值 | false | 自动播放 |
| autoplaySpeed | 整数 | 3000 | 自动播放间隔 |
| centerMode | 布尔值 | false | 中心模式 |
| centerPadding | 字符串 | ’50px’ | 中心模式左右内边距 |
| cssEase | 字符串 | ‘ease’ | CSS3 动画 |
| customPaging | function | n/a | 自定义分页 |
| dots | 布尔值 | false | 指示点 |
| draggable | 布尔值 | true | 启用桌面拖动 |
| easing | 字符串 | ‘linear’ | animate() fallback easing |
| fade | 布尔值 | false | 淡入淡出 |
| arrows | 布尔值 | true | 左右箭头 |
| infinite | 布尔值 | true | 循环播放 |
| lazyLoad | 字符串 | ‘ondemand’ | 延迟加载，可选 ondemand 和 progressive |
| onBeforeChange(this, index) | method | null | 开始切换前的回调函数 |
| onAfterChange(this, index) | method | null | 切换后的回调函数 |
| onInit(this) | method | null | 第一次初始化后的回调函数 |
| onReInit(this) | method | null | 再次初始化后的回调函数 |
| pauseOnHover | 布尔值 | true | 鼠标悬停暂停自动播放 |
| responsive | object | null | 断点触发设置 |
| slide | 字符串 | ‘div’ | 滑动元素查询 |
| slidesToShow | 整数 | 1 | 幻灯片每屏显示个数 |
| slidesToScroll | 整数 | 1 | 幻灯片每次滑动个数 |
| speed | 整数 | 300 | 滑动时间 |
| swipe | 布尔值 | true | 移动设备滑动事件 |
| touchMove | 布尔值 | true | 触摸滑动 |
| touchThreshold | 整数 | 5 | 滑动切换阈值，即滑动多少像素后切换 |
| useCSS | 布尔值 | true | 使用 CSS3 过度 |
| vertical | 布尔值 | false | 垂直方向 |
方法
| 方法 | Argument | 说明 |
|---|---|---|
| slick() | options : object | 初始化 slick |
| unslick() | 销毁 slick | |
| slickNext() | 切换下一张 | |
| slickPrev() | 切换上一张 | |
| slickPause() | 暂停自动播放 | |
| slickPlay() | 开始自动播放 | |
| slickGoTo() | index : int | 切换到第 x 张 |
| slickCurrentSlide() | 返回当前幻灯片索引 | |
| slickAdd() | element : html or DOM object, index: int, addBefore: bool | Add a slide. If an index is provided, will add at that index, or before if addBefore is set. If no index is provided, add to the end or to the beginning if addBefore is set. Accepts HTML String |
| slideRemove() | index: int, removeBefore: bool | Remove slide by index. If removeBefore is set true, remove slide preceding index, or the first slide if no index is specified. If removeBefore is set to false, remove the slide following index, or the last slide if no index is set. |
| slickFilter() | filter : selector or function | Filters slides using jQuery .filter syntax |
| slickUnfilter() | Removes applied filter | |
| slickSetOption(option,value,refresh) | option : string(option name), value : depends on option, refresh : 布尔值 | Sets an option live. Set refresh to true if it is an option that changes the display |
1、一张幻灯片，手动点击效果
代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Slick插件案例</title> <link rel="stylesheet" href="css/monokai.min.css"> <link rel="stylesheet" type="text/css" href="slick/slick.css"/> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body> <section id="features" class="blue"> <div class="content"> <h2>一张幻灯片</h2> <div class="slider single-item"> <div><h3>1</h3></div> <div><h3>2</h3></div> <div><h3>3</h3></div> <div><h3>4</h3></div> <div><h3>5</h3></div> <div><h3>6</h3></div> </div> </div> </section> <script src="js/jquery-1.10.2.js"></script> <script src="js/jquery-migrate-1.2.1.min.js"></script> <script src="js/highlight.min.js"></script> <script type="text/javascript" src="slick/slick.js"></script> <script type="text/javascript" src="js/scripts.js"></script> <script>hljs.initHighlightingOnLoad();</script> </body> </html>
$('.single-item').slick({
dots: true,//显示指示点
infinite: true,//开启循环播放
speed: 300,//滑动速度300毫秒，单位毫秒
slidesToShow: 1,//幻灯片每屏显示1个
slidesToScroll: 1//幻灯片每次滑动1个
});2、多张幻灯片
代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Slick插件案例</title> <link rel="stylesheet" href="css/monokai.min.css"> <link rel="stylesheet" type="text/css" href="slick/slick.css"/> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body> <section id="features" class="blue"> <div class="content"> <h2>多张幻灯片</h2> <div class="slider multiple-items"> <div><h3>1</h3></div> <div><h3>2</h3></div> <div><h3>3</h3></div> <div><h3>4</h3></div> <div><h3>5</h3></div> <div><h3>6</h3></div> <div><h3>7</h3></div> <div><h3>8</h3></div> <div><h3>9</h3></div> </div> </div> </section> <script src="js/jquery-1.10.2.js"></script> <script src="js/jquery-migrate-1.2.1.min.js"></script> <script src="js/highlight.min.js"></script> <script type="text/javascript" src="slick/slick.js"></script> <script type="text/javascript" src="js/scripts.js"></script> <script>hljs.initHighlightingOnLoad();</script> </body> </html>
$('.multiple-items').slick({
dots: true,
infinite: true,
speed: 300,
slidesToShow: 3,
slidesToScroll: 3
});3、响应式显示
PC端显示
手机端显示
代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Slick插件案例</title> <link rel="stylesheet" href="css/monokai.min.css"> <link rel="stylesheet" type="text/css" href="slick/slick.css"/> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body> <section id="features" class="blue"> <div class="content"> <h2>响应式显示</h2> <div class="slider responsive"> <div><h3>1</h3></div> <div><h3>2</h3></div> <div><h3>3</h3></div> <div><h3>4</h3></div> <div><h3>5</h3></div> <div><h3>6</h3></div> <div><h3>7</h3></div> <div><h3>8</h3></div> </div> </div> </section> <script src="js/jquery-1.10.2.js"></script> <script src="js/jquery-migrate-1.2.1.min.js"></script> <script src="js/highlight.min.js"></script> <script type="text/javascript" src="slick/slick.js"></script> <script type="text/javascript" src="js/scripts.js"></script> <script>hljs.initHighlightingOnLoad();</script> </body> </html>
$('.responsive').slick({
dots: true,
infinite: false,
speed: 300,
slidesToShow: 4,
slidesToScroll: 4,
responsive: [{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true,
dots: true
}
}, {
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
}, {
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}]
});4、一次一张
代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Slick插件案例</title> <link rel="stylesheet" href="css/monokai.min.css"> <link rel="stylesheet" type="text/css" href="slick/slick.css"/> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body> <section id="features" class="blue"> <div class="content"> <h2>一次一张</h2> <div class="slider one-time"> <div><h3>1</h3></div> <div><h3>2</h3></div> <div><h3>3</h3></div> <div><h3>4</h3></div> <div><h3>5</h3></div> <div><h3>6</h3></div> </div> </div> </section> <script src="js/jquery-1.10.2.js"></script> <script src="js/jquery-migrate-1.2.1.min.js"></script> <script src="js/highlight.min.js"></script> <script type="text/javascript" src="slick/slick.js"></script> <script type="text/javascript" src="js/scripts.js"></script> <script>hljs.initHighlightingOnLoad();</script> </body> </html>
$('.one-time').slick({
dots: true,
infinite: false,
placeholders: false,
speed: 300,
slidesToShow: 5,
touchMove: false,
slidesToScroll: 1
});5、参差不齐的设置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Slick插件案例</title> <link rel="stylesheet" href="css/monokai.min.css"> <link rel="stylesheet" type="text/css" href="slick/slick.css"/> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body> <section id="features" class="blue"> <div class="content"> <h2>参差不齐的设置</h2> <div class="slider uneven"> <div><h3>1</h3></div> <div><h3>2</h3></div> <div><h3>3</h3></div> <div><h3>4</h3></div> <div><h3>5</h3></div> <div><h3>6</h3></div> </div> </div> </section> <script src="js/jquery-1.10.2.js"></script> <script src="js/jquery-migrate-1.2.1.min.js"></script> <script src="js/highlight.min.js"></script> <script type="text/javascript" src="slick/slick.js"></script> <script type="text/javascript" src="js/scripts.js"></script> <script>hljs.initHighlightingOnLoad();</script> </body> </html>
$('.uneven').slick({
dots: true,
infinite: true,
speed: 300,
slidesToShow: 4,
slidesToScroll: 4
});6、中心大屏模式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Slick插件案例</title> <link rel="stylesheet" href="css/monokai.min.css"> <link rel="stylesheet" type="text/css" href="slick/slick.css"/> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body> <section id="features" class="blue"> <div class="content"> <h2>中心大屏模式</h2> <div class="slider center"> <div><h3>1</h3></div> <div><h3>2</h3></div> <div><h3>3</h3></div> <div><h3>4</h3></div> <div><h3>5</h3></div> <div><h3>6</h3></div> </div> </div> </section> <script src="js/jquery-1.10.2.js"></script> <script src="js/jquery-migrate-1.2.1.min.js"></script> <script src="js/highlight.min.js"></script> <script type="text/javascript" src="slick/slick.js"></script> <script type="text/javascript" src="js/scripts.js"></script> <script>hljs.initHighlightingOnLoad();</script> </body> </html>
$('.center').slick({
centerMode: true,
centerPadding: '60px',
slidesToShow: 3,
responsive: [{
breakpoint: 768,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 3
}
}, {
breakpoint: 480,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 1
}
}]
});7、懒惰加载
代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Slick插件案例</title> <link rel="stylesheet" href="css/monokai.min.css"> <link rel="stylesheet" type="text/css" href="slick/slick.css"/> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body> <section id="features" class="blue"> <div class="content"> <h2>懒惰加载</h2> <div class="slider lazy"> <div><div class="image"><img data-lazy="img/lazyfonz1.png"/></div></div> <div><div class="image"><img data-lazy="img/lazyfonz2.png"/></div></div> <div><div class="image"><img data-lazy="img/lazyfonz3.png"/></div></div> <div><div class="image"><img data-lazy="img/lazyfonz4.png"/></div></div> <div><div class="image"><img data-lazy="img/lazyfonz5.png"/></div></div> <div><div class="image"><img data-lazy="img/lazyfonz6.png"/></div></div> </div> </div> </section> <script src="js/jquery-1.10.2.js"></script> <script src="js/jquery-migrate-1.2.1.min.js"></script> <script src="js/highlight.min.js"></script> <script type="text/javascript" src="slick/slick.js"></script> <script type="text/javascript" src="js/scripts.js"></script> <script>hljs.initHighlightingOnLoad();</script> </body> </html>
$('.lazy').slick({
lazyLoad: 'ondemand',//延迟加载,可选 ondemand 和 progressive(测了下，没有延迟效果)
slidesToShow: 3,
slidesToScroll: 1
});8、自动播放
代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Slick插件案例</title> <link rel="stylesheet" href="css/monokai.min.css"> <link rel="stylesheet" type="text/css" href="slick/slick.css"/> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body> <section id="features" class="blue"> <div class="content"> <h2>自动播放</h2> <div class="slider autoplay"> <div><h3>1</h3></div> <div><h3>2</h3></div> <div><h3>3</h3></div> <div><h3>4</h3></div> <div><h3>5</h3></div> <div><h3>6</h3></div> </div> </div> </section> <script src="js/jquery-1.10.2.js"></script> <script src="js/jquery-migrate-1.2.1.min.js"></script> <script src="js/highlight.min.js"></script> <script type="text/javascript" src="slick/slick.js"></script> <script type="text/javascript" src="js/scripts.js"></script> <script>hljs.initHighlightingOnLoad();</script> </body> </html>
$('.autoplay').slick({
dots: true,
infinite: true,
speed: 300,
slidesToShow: 3,
slidesToScroll: 1,
autoplay: true,//开启自动播放
autoplaySpeed: 2000//自动播放间隔，每2秒播一次
});9、淡入淡出
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Slick插件案例</title> <link rel="stylesheet" href="css/monokai.min.css"> <link rel="stylesheet" type="text/css" href="slick/slick.css"/> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body> <section id="features" class="blue"> <div class="content"> <h2>淡入淡出</h2> <div class="slider fade"> <div><div class="image"><img src="img/fonz1.jpg"/></div></div> <div><div class="image"><img src="img/fonz2.jpg"/></div></div> <div><div class="image"><img src="img/fonz3.jpg"/></div></div> </div> </div> </section> <script src="js/jquery-1.10.2.js"></script> <script src="js/jquery-migrate-1.2.1.min.js"></script> <script src="js/highlight.min.js"></script> <script type="text/javascript" src="slick/slick.js"></script> <script type="text/javascript" src="js/scripts.js"></script> <script>hljs.initHighlightingOnLoad();</script> </body> </html>
$('.fade').slick({
dots: true,
infinite: true,
speed: 500,
fade: true,//开启淡入淡出效果
slide: 'div',//滑动元素查询
cssEase: 'linear'//CSS3 动画名字
});10、新增和移除幻灯片
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Slick插件案例</title> <link rel="stylesheet" href="css/monokai.min.css"> <link rel="stylesheet" type="text/css" href="slick/slick.css"/> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body> <section id="features" class="blue"> <div class="content"> <h2>动态添加和移除幻灯片</h2> <div class="slider add-remove"> <div><h3>1</h3></div> </div> <div class="buttons"> <a href="javascript:void(0)" class="button js-add-slide">新增幻灯片</a> <a href="javascript:void(0)" class="button js-remove-slide">移除幻灯片</a> </div> </div> </section> <script src="js/jquery-1.10.2.js"></script> <script src="js/jquery-migrate-1.2.1.min.js"></script> <script src="js/highlight.min.js"></script> <script type="text/javascript" src="slick/slick.js"></script> <script type="text/javascript" src="js/scripts.js"></script> <script>hljs.initHighlightingOnLoad();</script> </body> </html>
$('.add-remove').slick({
dots: true,
slidesToShow: 3,
slidesToScroll: 3
});
var slideIndex = 1;
$('.js-add-slide').on('click', function() {
slideIndex++;
$('.add-remove').slickAdd('<div><h3>' + slideIndex + '</h3></div>');
});
$('.js-remove-slide').on('click', function() {
$('.add-remove').slickRemove(slideIndex - 1);
if (slideIndex !== 0){
slideIndex--;
}
});11、过滤效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Slick插件案例</title> <link rel="stylesheet" href="css/monokai.min.css"> <link rel="stylesheet" type="text/css" href="slick/slick.css"/> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body> <section id="features" class="blue"> <div class="content"> <h2>过滤效果</h2> <div class="slider filtering"> <div><h3>1</h3></div> <div><h3>2</h3></div> <div><h3>3</h3></div> <div><h3>4</h3></div> <div><h3>5</h3></div> <div><h3>6</h3></div> <div><h3>7</h3></div> <div><h3>8</h3></div> <div><h3>9</h3></div> <div><h3>10</h3></div> <div><h3>11</h3></div> <div><h3>12</h3></div> </div> <div class="filter"> <a href="javascript:void(0)" class="button js-filter">过滤幻灯片</a> </div> </div> </section> <script src="js/jquery-1.10.2.js"></script> <script src="js/jquery-migrate-1.2.1.min.js"></script> <script src="js/highlight.min.js"></script> <script type="text/javascript" src="slick/slick.js"></script> <script type="text/javascript" src="js/scripts.js"></script> <script>hljs.initHighlightingOnLoad();</script> </body> </html>
$('.filtering').slick({
dots: true,
slidesToShow: 4,
slidesToScroll: 4
});
var filtered = false;
$('.js-filter').on('click', function() {
if (filtered === false) {
$('.filtering').slickFilter(':even');
$(this).text('没过滤幻灯片');
filtered = true;
} else {
$('.filtering').slickUnfilter();
$(this).text('过滤幻灯片');
filtered = false;
}
});下载：http://git.oschina.net/sensus/slickChaJianAnLi/tree/master
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jQuery插件slick实现响应式移动端幻灯片图片切换特效
- 10款新鲜出炉的 jQuery 插件(Ajax 插件，有幻灯片、图片画廊、菜单等)
- JQUERY 图片幻灯片效果插件
- 整理不错的jQuery 画廊和幻灯片插件
- 推荐15款创建漂亮幻灯片的 jQuery 插件
- 推荐20个非常棒的 jQuery 幻灯片插件和教程
- jquery 插件 轻量级jquery焦点图 幻灯片效果 jquery.slider
- jQuery和CSS3超酷三面板幻灯片插件
- 20个非常棒的 jQuery 幻灯片插件和教程分享
- Slick – 这是你需要的最后一款 jQuery 传送带插件
- jQuery幻灯片插件autoPic
- jQuery插件animateSlide制作多点滑动幻灯片
- 强大实用的jQuery幻灯片插件Owl Carousel
- Jquery幻灯片焦点图插件
- 介绍几款不错的轻量级jquery 幻灯片插件
- jQuery 幻灯片插件(带缩略图功能)
- 15个幻灯片效果的JQuery插件
- Prezento – 轻量、简单的 jQuery 幻灯片插件
- jQuery适合移动设备触摸屏的响应式幻灯片插件
- 使用jquery插件coin-slider轻松打造幻灯片教程