jQuery幻灯片插件slick实例

由于工作要将图片做成幻灯片样式,于是想到了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>

运行效果:

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: 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>

运行效果:

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: 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>

运行效果:

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 { 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>

运行效果:

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 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>

运行效果:

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: 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>

运行效果:

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: 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>

运行效果:

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: 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>

运行效果:

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 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>

运行效果:

jQuery幻灯片插件slick实例

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

相关推荐