jQuery幻灯片插件slick实例

news/2024/7/10 22:35:22 标签: jQuery

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


http://www.niftyadmin.cn/n/1316353.html

相关文章

[Firefox附加组件]0004.上下文菜单项

[Firefox附加组件]0004.上下文菜单项

在我们平常浏览网页是经常要对网页类容进行一些操作处理&#xff0c;如复制&#xff0c;翻译&#xff0c;搜索&#xff0c;打印打印等,今天我们就学习下如何在Firefox中我们如何通过附加组件实现这些操作。 开发步骤 1.终端窗口运行以下命令创建项目contextMenu mkdir contextM…
阅读更多...
git提交中文乱码问题解决

git提交中文乱码问题解决

1. 问题现象 Git无法正常显示中文 2. 问题解决 首先&#xff0c;先说下配置git支持中文。 执行命令&#xff1a;git config –-global core.quotepath false 好了&#xff0c;这样就可以支持中文了&#xff0c;之前显示的乱码可以显示了。
阅读更多...
angularjs短信验证码及秒倒计时

angularjs短信验证码及秒倒计时

工作H5开发需要做短信验证码及秒倒计时&#xff0c;如果是用纯JS做好像还比较容易&#xff0c;但用angularJS做还是一些坑&#xff0c;特此记录一下&#xff0c;有如下几种实现方式。 一.setTimeout方式实现 <html> <head><title>AngularJs倒计时</title&…
阅读更多...
理解和解决angularJS报错$apply already in progress

理解和解决angularJS报错$apply already in progress

如果我们使用了AngularJS中的$scope.$apply()或者$scope.$digest()&#xff0c;我们很可能会遇到类似下面的错误&#xff0c;虽然这个错误没有太大影响&#xff0c;但是在日志中看起来还是很不爽的&#xff0c;日志中记录的异常或者错误&#xff0c;就应该是需要关注和解决的问…
阅读更多...
结对项目博客——四则运算题目生成程序的改进与分析

结对项目博客——四则运算题目生成程序的改进与分析

一、结对编程 结对成员&#xff1a; 康家华&#xff08;学号后三位190&#xff09; 1. 结对编程照片 2. 结对编程的优点 1) 单人编程时&#xff0c;由于每个人的精力有限&#xff0c;无法长时间的高度集中精力实现高质量编程。而在结对编程时&#xff0c;由于两个人的身份可以互…
阅读更多...
Sanitize Device

Sanitize Device

1. 基本概念 Sanitize Device属于ATA指令中的一个功能特性。通过FEATURE字段值来识别当前指令属于Sanitize Device特性中具体哪个子命令 Table 81 — Sanitize Device FEATURE field values Feature Value Command 0000h SANITIZE STATUS EXT (see 7.36.7) 0001h..0010h …
阅读更多...
FreeRTOS vTaskStartScheduler流程

FreeRTOS vTaskStartScheduler流程

1. FreeRTOS是通过vTaskStartScheduler()函数来启动运行的。 &#xff08;1&#xff09;在该流程中首先创建了idleTask &#xff08;2&#xff09;创建TimerTask &#xff08;3&#xff09;关中断portDISABLE_INTERRUPTS(); void vTaskStartScheduler( void ) { BaseType_t x…
阅读更多...
Chrome开发者工具中关于“Deferred long-running timer task(s) ”的警告

Chrome开发者工具中关于“Deferred long-running timer task(s) ”的警告

在项目中做angularjs短信验证码及秒倒计时这样的功能时&#xff0c;F12有时候能看到“Deferred long-running timer task(s) ”的警告。 网上查到相关的解释&#xff0c;特意写在这里&#xff0c;以免忘记。 浏览器中报错的信息如下&#xff1a; 答案描述&#xff1a; 这个问题…
阅读更多...
最新文章

Copyright @ 2022~2023