jQuery幻灯片插件slick实例

编程语言 2018-05-09 19:28:26 阅读次数: 2

　　由于工作要将图片做成幻灯片样式，于是想到了JQuery插件slick，上网查了一下，一些效果用法实例特意在此记录下：

一.单个显示

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>jQuery幻灯片插件slick演示</title>
	<link rel="stylesheet" href="style/slick.css">
	<style>
		* { margin: 0; padding: 0;}
		.slick { width: 600px; margin: 0 auto;}
		.slick-prev:before, .slick-next:before { position: absolute; left: 0; top: 1px; color: #ccc;}
		.slick-prev { left: -35px;}
		.slick-next { right: -35px;}
		.slick-dots { bottom: -35px;}
	</style>
</head>
<body>
    <h1 style="margin: 40px; font: 32px Microsoft Yahei; text-align: center;">jQuery幻灯片插件slick演示-单个显示</h1>
	
	<div class="slick">
    <div><img src="images/1.jpg" alt=""></a></div>
    <div><img src="images/2.jpg" alt=""></div>
    <div><img src="images/3.jpg" alt=""></div>
    <div><img src="images/4.jpg" alt=""></div>
    <div><img src="images/5.jpg" alt=""></div>
	<div><img src="images/6.jpg" alt=""></div>
	<div><img src="images/7.jpg" alt=""></div>
	<div><img src="images/8.jpg" alt=""></div>
	<div><img src="images/9.jpg" alt=""></div>
</div>
</body>
<script src="script/jquery-1.8.3.js"></script>
<script src="script/slick.js"></script>
<script>
	$(function(){
		$('.slick').slick({
			dots: true
		});
	});
</script>
</html>

运行效果：



二.多个显示

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>jQuery幻灯片插件slick演示</title>
	<link rel="stylesheet" href="style/slick.css">
	<style>
		* { margin: 0; padding: 0;}
		.slick { width: 900px; margin: 0 auto;}
		.slick img { width: 280px; border: 10px solid #fff;}
		.slick-prev:before, .slick-next:before { position: absolute; left: 0; top: 1px; color: #ccc;}
		.slick-prev { left: -35px;}
		.slick-next { right: -35px;}
		.slick-dots { bottom: -35px;}
	</style>
</head>
<body>
    <h1 style="margin: 40px; font: 32px Microsoft Yahei; text-align: center;">jQuery幻灯片插件slick演示-多个显示</h1>
	
	<div class="slick">
    <div><img src="images/1.jpg" alt=""></a></div>
    <div><img src="images/2.jpg" alt=""></div>
    <div><img src="images/3.jpg" alt=""></div>
    <div><img src="images/4.jpg" alt=""></div>
    <div><img src="images/5.jpg" alt=""></div>
	<div><img src="images/6.jpg" alt=""></div>
	<div><img src="images/7.jpg" alt=""></div>
	<div><img src="images/8.jpg" alt=""></div>
	<div><img src="images/9.jpg" alt=""></div>
</div>
</body>
<script src="script/jquery-1.8.3.js"></script>
<script src="script/slick.js"></script>
<script>
	$(function(){
		$('.slick').slick({
			dots: true,
			slidesToShow: 3,
			slidesToScroll: 3
		});
	});
</script>
</html>

运行效果：


 

三.多个显示单个滑动

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>jQuery幻灯片插件slick演示</title>
	<link rel="stylesheet" href="style/slick.css">
	<style>
		* { margin: 0; padding: 0;}
		.slick { width: 900px; margin: 0 auto;}
		.slick img { width: 280px; padding: 10px;}
		.slick-prev:before, .slick-next:before { position: absolute; left: 0; top: 1px; color: #ccc;}
		.slick-prev { left: -35px;}
		.slick-next { right: -35px;}
		.slick-dots { bottom: -35px;}
	</style>
</head>
<body>
    <h1 style="margin: 40px; font: 32px Microsoft Yahei; text-align: center;">jQuery幻灯片插件slick演示-多个显示单个滑动</h1>
	
	<div class="slick">
    <div><img src="images/1.jpg" alt=""></a></div>
    <div><img src="images/2.jpg" alt=""></div>
    <div><img src="images/3.jpg" alt=""></div>
    <div><img src="images/4.jpg" alt=""></div>
    <div><img src="images/5.jpg" alt=""></div>
	<div><img src="images/6.jpg" alt=""></div>
	<div><img src="images/7.jpg" alt=""></div>
	<div><img src="images/8.jpg" alt=""></div>
	<div><img src="images/9.jpg" alt=""></div>
</div>
</body>
<script src="script/jquery-1.8.3.js"></script>
<script src="script/slick.js"></script>
<script>
	$(function(){
		$('.slick').slick({
			dots: true,
			slidesToShow: 3,
			slidesToScroll: 1
		});
	});
</script>
</html>

运行效果：



四.响应式

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>jQuery幻灯片插件slick演示</title>
	<link rel="stylesheet" href="style/slick.css">
	<style>
		* { margin: 0; padding: 0;}
		.slick { max-width: 1024px; margin: 0 auto;}
		.slick img { width: 100%;}
		.slick-prev:before, .slick-next:before { position: absolute; left: 0; top: 1px; color: #ccc;}
		.slick-prev { left: -35px;}
		.slick-next { right: -35px;}
		.slick-dots { bottom: -35px;}
	</style>
</head>
<body>
    <h1 style="margin: 40px; font: 32px Microsoft Yahei; text-align: center;">jQuery幻灯片插件slick演示-响应式</h1>
	
	<p style="margin-bottom: 20px; text-align: center; color: #f50;">试试改变浏览器窗口大小</p>
	
	<div class="slick">
    <div><img src="images/1.jpg" alt=""></a></div>
    <div><img src="images/2.jpg" alt=""></div>
    <div><img src="images/3.jpg" alt=""></div>
    <div><img src="images/4.jpg" alt=""></div>
    <div><img src="images/5.jpg" alt=""></div>
	<div><img src="images/6.jpg" alt=""></div>
	<div><img src="images/7.jpg" alt=""></div>
	<div><img src="images/8.jpg" alt=""></div>
	<div><img src="images/9.jpg" alt=""></div>
</div>
</body>
<script src="script/jquery-1.8.3.js"></script>
<script src="script/slick.js"></script>
<script>
	$(function(){
		$('.slick').slick({
			dots: true,
			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
					}
				}
			]
		});
	});
</script>
</html>

运行效果：



五.淡入淡出

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>jQuery幻灯片插件slick演示</title>
	<link rel="stylesheet" href="style/slick.css">
	<style>
		* { margin: 0; padding: 0;}
		.slick { width: 600px; margin: 0 auto;}
		.slick img { width: 100%;}
		.slick-prev:before, .slick-next:before { position: absolute; left: 0; top: 1px; color: #ccc;}
		.slick-prev { left: -35px;}
		.slick-next { right: -35px;}
		.slick-dots { bottom: -35px;}
	</style>
</head>
<body>
    <h1 style="margin: 40px; font: 32px Microsoft Yahei; text-align: center;">jQuery幻灯片插件slick演示-淡入淡出</h1>
	
	<div class="slick">
    <div><img src="images/1.jpg" alt=""></a></div>
    <div><img src="images/2.jpg" alt=""></div>
    <div><img src="images/3.jpg" alt=""></div>
    <div><img src="images/4.jpg" alt=""></div>
    <div><img src="images/5.jpg" alt=""></div>
	<div><img src="images/6.jpg" alt=""></div>
	<div><img src="images/7.jpg" alt=""></div>
	<div><img src="images/8.jpg" alt=""></div>
	<div><img src="images/9.jpg" alt=""></div>
</div>
</body>
<script src="script/jquery-1.8.3.js"></script>
<script src="script/slick.js"></script>
<script>
	$(function(){
		$('.slick').slick({
			dots: true,
			fade: true
		});
	})
</script>
</html>

运行效果：


 

六.中心模式

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>jQuery幻灯片插件slick演示</title>
	<link rel="stylesheet" href="style/slick.css">
	<style>
		* { margin: 0; padding: 0;}
		.slick { width: 900px; margin: 0 auto;}
		.slick img { box-sizing: border-box;  width: 260px; height: 170px;}
		.slick-slide img { padding: 20px;}
		.slick-center img { padding: 10px;}
		.slick-prev:before, .slick-next:before { position: absolute; left: 0; top: 1px; color: #ccc;}
		.slick-prev { left: -35px;}
		.slick-next { right: -35px;}
		.slick-dots { bottom: -35px;}
	</style>
</head>
<body>
    <h1 style="margin: 40px; font: 32px Microsoft Yahei; text-align: center;">jQuery幻灯片插件slick演示-中心模式</h1>
	
	<div class="slick">
    <div><img src="images/1.jpg" alt=""></a></div>
    <div><img src="images/2.jpg" alt=""></div>
    <div><img src="images/3.jpg" alt=""></div>
    <div><img src="images/4.jpg" alt=""></div>
    <div><img src="images/5.jpg" alt=""></div>
	<div><img src="images/6.jpg" alt=""></div>
	<div><img src="images/7.jpg" alt=""></div>
	<div><img src="images/8.jpg" alt=""></div>
	<div><img src="images/9.jpg" alt=""></div>
</div>
</body>
<script src="script/jquery-1.8.3.js"></script>
<script src="script/slick.js"></script>
<script>
	$(function(){
		$('.slick').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
					}
				}
			]
		});
	})
</script>
</html>

运行效果：



七.图片延迟加载

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>jQuery幻灯片插件slick演示</title>
	<link rel="stylesheet" href="style/slick.css">
	<style>
		* { margin: 0; padding: 0;}
		.slick { width: 900px; margin: 0 auto;}
		.slick img { width: 280px; padding: 10px;}
		.slick-prev:before, .slick-next:before { position: absolute; left: 0; top: 1px; color: #ccc;}
		.slick-prev { left: -35px;}
		.slick-next { right: -35px;}
		.slick-dots { bottom: -35px;}
	</style>
</head>
<body>
    <h1 style="margin: 40px; font: 32px Microsoft Yahei; text-align: center;">jQuery幻灯片插件slick演示-图片延迟加载</h1>
	
	<div class="slick">
    <div><img src="images/1.jpg" alt=""></a></div>
    <div><img src="images/2.jpg" alt=""></div>
    <div><img src="images/3.jpg" alt=""></div>
    <div><img src="images/4.jpg" alt=""></div>
    <div><img src="images/5.jpg" alt=""></div>
	<div><img src="images/6.jpg" alt=""></div>
	<div><img src="images/7.jpg" alt=""></div>
	<div><img src="images/8.jpg" alt=""></div>
	<div><img src="images/9.jpg" alt=""></div>
</div>
</body>
<script src="script/jquery-1.8.3.js"></script>
<script src="script/slick.js"></script>
<script>
	$(function(){
		$('.slick').slick({
			dots: true,
			lazyLoad: 'ondemand',
			slidesToShow: 3,
			slidesToScroll: 1
		});
	})
</script>
</html>

运行效果：


 

八.自动播放

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>jQuery幻灯片插件slick演示</title>
	<link rel="stylesheet" href="style/slick.css">
	<style>
		* { margin: 0; padding: 0;}
		.slick { width: 900px; margin: 0 auto;}
		.slick img { width: 280px; padding: 10px;}
		.slick-prev:before, .slick-next:before { position: absolute; left: 0; top: 1px; color: #ccc;}
		.slick-prev { left: -35px;}
		.slick-next { right: -35px;}
		.slick-dots { bottom: -35px;}
	</style>
</head>
<body>
    <h1 style="margin: 40px; font: 32px Microsoft Yahei; text-align: center;">jQuery幻灯片插件slick演示-自动播放</h1>
	
	<div class="slick">
    <div><img src="images/1.jpg" alt=""></a></div>
    <div><img src="images/2.jpg" alt=""></div>
    <div><img src="images/3.jpg" alt=""></div>
    <div><img src="images/4.jpg" alt=""></div>
    <div><img src="images/5.jpg" alt=""></div>
	<div><img src="images/6.jpg" alt=""></div>
	<div><img src="images/7.jpg" alt=""></div>
	<div><img src="images/8.jpg" alt=""></div>
	<div><img src="images/9.jpg" alt=""></div>
</div>
</body>
<script src="script/jquery-1.8.3.js"></script>
<script src="script/slick.js"></script>
<script>
	$(function(){
		$('.slick').slick({
			dots: true,
			slidesToShow: 3,
			slidesToScroll: 1,
			autoplay: true,
			autoplaySpeed: 2000
		});
	})
</script>
</html>

运行效果：


 

九.解绑/销毁

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>jQuery幻灯片插件slick演示</title>
	<link rel="stylesheet" href="style/slick.css">
	<style>
		* { margin: 0; padding: 0;}
		.slick { width: 600px; margin: 0 auto;}
		.slick img { width: 100%;}
		.slick-prev:before, .slick-next:before { position: absolute; left: 0; top: 1px; color: #ccc;}
		.slick-prev { left: -35px;}
		.slick-next { right: -35px;}
		.slick-dots { bottom: -35px;}

		.unslick { margin-bottom: 20px; text-align: center; font-size: 14px; color: #f50; overflow: hidden; zoom: 1;}
		.unslick a { display: inline-block; padding: 5px 8px; background-color: #f50; color: #fff; text-decoration: none;}
	</style>
</head>
<body>
    <h1 style="margin: 40px; font: 32px Microsoft Yahei; text-align: center;">jQuery幻灯片插件slick演示-解绑/销毁</h1>
	
	<p class="unslick"><a href="javascript:">解绑/销毁</a> 点击后将为元素移除 slick() 方法，幻灯片将失效。</p>
	
	<div class="slick">
    <div><img src="images/1.jpg" alt=""></a></div>
    <div><img src="images/2.jpg" alt=""></div>
    <div><img src="images/3.jpg" alt=""></div>
    <div><img src="images/4.jpg" alt=""></div>
    <div><img src="images/5.jpg" alt=""></div>
	<div><img src="images/6.jpg" alt=""></div>
	<div><img src="images/7.jpg" alt=""></div>
	<div><img src="images/8.jpg" alt=""></div>
	<div><img src="images/9.jpg" alt=""></div>
</div>
</body>
<script src="script/jquery-1.8.3.js"></script>
<script src="script/slick.min.js"></script>
<script>
	$(function(){
		$('.slick').slick({
			dots: true
		});

		$('.unslick a').click(function(){
			$('.slick').unslick();
		});
	})
</script>
</html>

运行效果：

参考来源：http://www.dowebok.com/demo/2014/84/

猜你喜欢

转载自bijian1013.iteye.com/blog/2391957
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
周排行
让自己的头脑极度开放
CentOS 6.5(x64) 和Redhat6.5操作系误删libc
高可用注册中心
【日记】12.28/【题解】AtCoder AGC041
XML（5）_XML 约束_DTD
Java集合Map（四）
树梅派安装桌面环境教程
pipenv 的 使用和安装
小程序白屏问题和内存研究
C语言简单选择排序
每日归档
更多
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022