jQuery幻灯片插件slick实例

CodeTerminator 2017-09-02

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

CodeTerminator

CodeTerminator

相关推荐

这些效果我很喜欢，但愿对你们也有帮助

id=j02i1k10j腾讯团购切换特效，腾讯团购切换特效。id=j021ji1aajQuery自定义拖动设置时间段，可以灵活设置一天内的任意时段。id=j02cj110j极具创意的背景图转换和jquery菜单。jquery hover属性仿改图网橙色的侧

80437916 / 0评论 2020-05-11

ppt-页面大小和颜色更改

选中要填充的位置——颜色——可直接更改色彩，若手动设置，可点击其他颜色，标准或者自定义。选中要填充的位置——颜色——预设渐变，如果预设渐变中没有自己想要的效果，可自定义——类型、方向、角度、渐变光圈等修改。取消所有设置的背景，只剩下文本框。

VanTYS / 0评论 2020-05-07

将latex的beamer做的幻灯片转换为ppt格式后的一些问题

由于雨课堂采取了ppt插件的形式运行，所以latex做出的pdf必然需要转成ppt，才能在主调窗口直接运行。好在目前版本的acrobat dc转后的pptx，效果比以前好很多，仅仅个别中文文字出现误转的情况，需要手动再修改。所以以后坚持latex阵地的老师

山水一方 / 0评论 2020-02-03

绝对推荐，HTML5与JQuery结合的幻灯片

//我们监听了 window.load 事件，因此我们确定幻灯片上的所有图片都能够正确进行加载。//图片的canvas效果操作是受CPU渲染影响的，//取决于这个是下一张箭头的按钮还是上一张箭头的按钮,//计算出下一张幻灯片的索引号。//若当前浏览器不支持

zhangpeng / 0评论 2014-01-10

jquery焦点移动幻灯片 swipe effect slider

swipe effect slider 是一款在themeforest上售价20美元的幻灯片，该幻灯片以焦点移动的方式进行图片切换，支持缩略图预览加载，现在免费分享给大家。

yFifhting / 0评论 2014-01-16

经典的一款jQuery soChange幻灯片

soChange一款多很经典的幻灯片的jQuery插件。changeType:'fade',//切换方式，可选：fade,slide，默认为fade，1.6版新增方法，详见例3-定义对象切换方式为slide. slideTime:1000,//平滑过渡时间

小肖 / 0评论 2016-12-26

jQuery幻灯片插件slick实例

　　由于工作要将图片做成幻灯片样式，于是想到了JQuery插件slick，上网查了一下，一些效果用法实例特意在此记录下：。.slick-prev:before, .slick-next:before { position: absolute; left:

82413161 / 0评论 2017-09-02

Win10如何通过幻灯片模式来进行关机?

　　当我们不使用电脑了，就会关机，每次按部就班的关机模式，大家是否会觉得淡然无味呢？其实Win10系统可以使用幻灯片模式来关机，这样电脑就可以像手机和平板一样，滑动就可以关机了，是不是非常的有艺术感？今天小编就来为大家分享一下Win10通过幻灯片模式来进行

89384498 / 0评论 2016-12-20

win10怎么将桌面上的壁纸改变成幻灯片?

一张好的图片该用于一个神圣的地方,那就是桌面壁纸,不但可以发挥养眼作用,还能让别人有眼前一亮的感觉。那么win10怎么将桌面上的壁纸改变成幻灯片?相信才升级windows10的大家还不会设置吧！下面就教大家设置吧！首先点击按钮，或者键盘上的按键，找到右脚下

80236832 / 0评论 2016-03-19

怎么设置Win10系统在无电源情况下开启壁纸幻灯片放映？

怎么给win10系统换上幻灯片背景？教你如何在笔记本或surface没有插入AC电源的情况下，继续保持壁纸幻灯片放映工作。开启幻灯片放映是超级简单的。然而，你首先需要为你想要进行循环放映的壁纸创建一个文件夹。我建议在图片文件夹下创建一个名为幻灯片放映的文件

combine / 0评论 2015-08-17

Win10怎么设置自动更换桌面背景？Win10幻灯片背景设置方法

7、这里设置背景的显示方式，看你的图片大小和爱好吧。

86206132 / 0评论 2015-08-11

和秋叶一起学PPT：又快又好打造说服力幻灯片

　　《和秋叶一起学ppt：又快又好打造说服力幻灯片》适合ppt初学者，但即便你是一个ppt老手，这本书一样能让你大呼开卷有益。这本书将帮助你解决如下问题：1、快速掌握powerpoint最新版本的功能操作；2、快速扩充powerpoint页面美化的思维方法

chenyanyan / 0评论 2013-06-14

如何制作好的PPT

向观众发送说明幻灯片的详细书面宣传材料，比仅用 PowerPoint幻灯片，更利于观众理解演示的内容。在演示完成以后，再向观众发放一份详细的宣传材料或印刷物，您就不必用大量文本来填充 PowerPoint幻灯片。避免使用PowerPoint剪贴画或其它卡通

luohnoyo / 0评论 2013-02-05

乐享PowerPoint！5个PPT成就幻灯片达人

5个PPT成就幻灯片达人。　　16位幻灯片达人联袂力荐！　　读一读，你会发现它与以往的PPT办公软件书籍有那么多的不同。PPT来自工作，但却紧密联系着我们的生活，自我介绍、电子相册、婚礼短片、休闲小品等都是PPT施展的舞台，而这些领域对创意、审美、动画有着

嵌入式企鹅圈 / 0评论 2012-04-10

关于PPT的制作

如果您设计的幻灯片杂乱无章、文本过多、不美观，那么就不能组成一个吸引人的演示来传递信息。本文提出的这些建议将帮助您开发出专业且引人注目的演示。PowerPoint从水平或横向使用幻灯片。所以除了PowerPoint幻灯片以外，最好还要准备一份书面资料，强调

youyoumo / 0评论 2012-03-03

CNCF网络研讨会：Kubernetes 1.13的新功能（视频+幻灯片）

此版本继续关注Kubernetes的稳定性和可扩展性，其中在存储和群集生命周期领域的三个主要功能实现普遍可用。此版本中的显着毕业特征包括：kubeadm简化集群管理、容器存储接口和CoreDNS作为默认DNS。此外，还有一系列持续不断的内部改进和新的alp

IT兄弟团 / 0评论 2019-06-30

小清新的jQuery 幻灯片jQuery ck-slide 图片轮播

ck_slide 是一款小清新的jQuery 幻灯片插件，它非常小巧，压缩后仅 3KB，基本功能可以满足。它支持淡入淡出/左右滚动、箭头/圆点控制、自动播放。在线实例默认左右滚动自动播放使用方法<divclass="ck-slide&quo

pplxh / 0评论 2016-09-07

一款经典的jQuery slidizle 幻灯片

jQuery广告幻灯片进度条，水平/左右切换，垂直/上下切换，自动播放，缩略图列表切换

有心就有方向 / 0评论 2016-08-31

jquery全屏幻灯片焦点图轮播插件演示下载

1 小米3发布官网jQuery焦点图全屏大图。2 jQuery左侧图片加右侧说明焦点图图片轮滚。3 jQuery右侧选项卡收缩幻灯片。4 jQuery轮播图插件jCarousel

88570299 / 0评论 2014-10-16

亿级用户万台服务器背后，vivo云服务容器化如何破茧化蝶？

2018年数人云Meetup第一站，联合vivo在深圳举办 Building Microservice 系列活动第一期。本次技术沙龙vivo、中兴通讯、华为、数人云共同派出技术大咖，为开发者们带来有关微服务、容器化、配置中心、服务网格等领域的实战与干货分享

wanchaopeng / 0评论 2019-06-26

绝对推荐，HTML5与JQuery结合的幻灯片

//我们监听了 window.load 事件，因此我们确定幻灯片上的所有图片都能够正确进行加载。//图片的canvas效果操作是受CPU渲染影响的，//取决于这个是下一张箭头的按钮还是上一张箭头的按钮,//计算出下一张幻灯片的索引号。//若当前浏览器不支持

lkj0 / 0评论 2014-01-10

jquery焦点移动幻灯片 swipe effect slider

swipe effect slider 是一款在themeforest上售价20美元的幻灯片，该幻灯片以焦点移动的方式进行图片切换，支持缩略图预览加载，现在免费分享给大家。

有心就有方向 / 0评论 2014-01-16

使用jQuery嵌入幻灯片中的tumblr博客

这些评论，旨在为您提供我们认为对开发者很有用的价值，产品和服务的信息。介绍tumblr是一个微博平台，而且可能是最出名的有趣的图片，视频，动画GIF，当然，NSFW内容的社交网站。tumblr确实让所有类型的人表达自己使用所有形式的媒体的一个伟大的工作 –

88580793 / 0评论 2013-12-05

jquery bxslider幻灯片样式改造

找了很多jquery的幻灯片，都觉得不是很好，最后发现bxslider兼容性最好，移动设备支持手动翻动。但是官方提供的显示效果真的很难看，让人难以接受。最后只能自己DIY了。</ul>在此基础上创建了一个slider_block的父层DIV，设

Allenyhy / 0评论 2013-11-15

60款很酷的 jQuery 幻灯片演示和下载

　jQuery 是一个非常优秀的 JavaScript 框架，使用简单灵活，同时还有许多成熟的插件可供选择，它可以帮助你在项目中加入漂亮的效果，其中之一就是幻灯片效果的实现，这是一种在有限的网页空间内展示系列项目时非常好的方法。今天这篇文章要给大家分享的是

87493063 / 0评论 2013-08-24

12个制作全屏背景的jQuery插件

是一个创建全屏背景幻灯很有名的jQuery插件。这个插件将自动应用一个很酷的纹理,使背景图像看起来像“背景”。上面12个制作全屏背景的插件资源来自于Kenny的《12 Fullscreen Background jQuery Plugins》。

momode / 0评论 2013-04-26

原创Jquery实现图片幻灯片特效

首先非常感谢网友晓天的无私分享，此Jquery特效是他的第一个原创作品，也是第一个版本，是模仿QQ音乐的图片轮播效果，基本功能已经实现，还在不断的强化中，希望网友们在使用的过程中多给点建议，让作品更加完善。。。currentIndex+1:0; //判断图

Kindlecode / 0评论 2013-03-04

用CSS实现一个简单的幻灯片效果页面

用CSS实现一个简单的幻灯片效果页面，第一反应是利用CSS3的animation。不过为了兼容浏览器，记得加各浏览器前缀，我最开始写的时候忘记加浏览器前缀，在chrome中一直没有任何显示。下面说说用到的animation各属性。animation-nam

yezi / 0评论 2019-06-20

突破百度外链封锁 将外链打入百度文库、经验的方法分析

百度旗下的产品对外链的管理变得越来越严格，想要在百度旗下的产品如百度知道、文库、空间和经验里面留下自己的外链，往往具有极高的难度，但是如果一旦成功留下，那么对于网站的优化效果无疑是极高的，因为毕竟是百度传递过来的权重，在百度的算法中会给出更好的系数进行计算

小白的黑科技 / 0评论 2014-10-29

SEO如何做好图片优化？ 让图片优化给网站增色

一个优秀的网站要想给访客留下好的印象，不仅仅体现在措辞恰当的文字上，更重要的是需要需要优质的图片来搭配!因此在网站优化中，我们不仅要学会写原创文章，而且在图片的优化上，也需要投入足够的精力学习。本文，我将会全面的给大家讲一下，如何让图片的优化给你的网站增色

李蓝箫 / 0评论 2014-10-27

[转]CSS3实现图片幻灯片效果

CSS3增加了许多新特性，以前要用JavaScript才能实现的效果可以用CSS3轻松完成，这篇文章要推荐的就是一个纯粹用CSS3实现的幻灯片切换效果。这个特效只针对iOS的设备添加了一个JavaScript文件，在其它浏览器中是不需要的。在浏览器兼容性方

iamrunner / 0评论 2012-08-12

javascript实现内容播放幻灯片效果

<div id="wai" style="cursor:pointer; margin:0px; height:88px; width:650px; overflow:hidden; position:relative;

lzn / 0评论 2019-06-20

javascript实现内容播放幻灯片效果

<div id="wai" style="cursor:pointer; margin:0px; height:88px; width:650px; overflow:hidden; position:relative;

梦秋雨 / 0评论 2011-12-29

25个必须要学会的jQuery幻灯片插件教程（中）

通过这一教程可学会使用CSS和JQuery来创建一种幻灯片播放方式。通读这一教程来获得一些在创造一种jQuery图像滚动器时用得上的贴士。这一教程使用jQuery来为整套照片或是类似的网站创造一些漂亮的效果。这是另一个详细而又独特的创造简单的jQuery图

83570690 / 0评论 2011-11-28

25个必须要学会的jQuery幻灯片插件教程（上）

学会利用视差原理在滑动图片时移动不同的背景，以此来创造出一些漂亮的透视效果。这一教程演示了如何使用jQuery和CSS3的旋转，连同jQuery的旋转插件一起创建出一种漂亮的幻灯片播放效果。这里是一个关于为一个电脑商场制作一个平滑的内容滚动器的教程，作为帮

AnneZhao / 0评论 2011-11-27

jQuery内容滚动幻灯片插件 - Diapo

Diapo是一个简单且易于使用的内容滚动幻灯片插件，让你能够在网页中展示很酷的动画切换效果。此插件所能展示的内容不仅仅是图片，甚至可以是视频，其他任意你能想到的网页元素都能显示在其上。插件的滚动控制方式也有自动播放、前后按钮、缩略图导航这3种方式。除此之外

kwenLee / 0评论 2011-09-01

15款jQuery幻灯片插件

幻灯片效果通常用于展示相册图片或特色推荐内容。一个漂亮的幻灯片更能吸引访客的注意力。Galleriffic 是使用 Mike Alsup 的 jQuery Cycle plugin 创建的图片展示效果，包括缩略图、图片标题和描述等详细功能，是一个非常不错的

88284453 / 0评论 2011-04-09

【示例代码】3D旋转图片立体展示jquery幻灯片插件（附源码）

此Jquery插件实现了3D旋转图片立体展示幻灯片插件，功能非常酷。有兴趣的同学可以试着做一下。　　包括了以下功能：　　1、可支持鼠标滚轮控制图片360度旋转　　2、鼠标支持左右方向控制按钮来控制图片旋转的方向　　3、图片自动旋转播放　　4、修正了兼容所有

86453967 / 0评论 2013-05-09

Android Mms 源码结构

从实现的角度来看，它分为GUI展示层，发送/接收，彩信解析，彩信附件，信息数据等，这些分类对应着源码中的各种包。ui---GUI展示层，用于展示对话列表，消息列表，消息编辑页，彩信附件编辑，彩信展示，播放幻灯片。负责直接与用户交互。这个Activity也负

凉白开 / 0评论 2012-05-22

鉴客 Android Mms 源码结构

从实现的角度来看，它分为GUI展示层，发送/接收，彩信解析，彩信附件，信息数据等，这些分类对应着源码中的各种包。ui---GUI展示层，用于展示对话列表，消息列表，消息编辑页，彩信附件编辑，彩信展示，播放幻灯片。负责直接与用户交互。MessageListV

源码在手 / 0评论 2012-03-09

Android Mms 源码结构

从实现的角度来看，它分为GUI展示层，发送/接收，彩信解析，彩信附件，信息数据等，这些分类对应着源码中的各种包。ui---GUI展示层，用于展示对话列表，消息列表，消息编辑页，彩信附件编辑，彩信展示，播放幻灯片。负责直接与用户交互。这个Activity也负

源码佳人 / 0评论 2012-02-19

极简AI：10张幻灯片看懂AI/机器学习

10张有用的幻灯片和简短解释，带你了解AI，一图胜千言。分析是发现、解释和交流数据中有意义的模式，以及将这些模式应用于有效决策的过程。换句话说，分析可以理解为组织内数据和有效决策之间的连接组织。特别是在有记录的信息丰富的领域，分析依赖于同时应用统计、计算机

TensorFlowNews / 0评论 2019-03-25

红宝石（Ruby）史话

尽管我很难说清楚为什么，但 Ruby 一直是我最喜爱的一门编程语言。如果用音乐来类比的话，Python 给我的感觉像是 朋克摇滚，简单、直接，但略显单调，而 Ruby 则像是爵士乐，从根本上赋予了程序员表达自我的自由，虽然这可能会让代码变复杂，编写出来的程

yoyoshadow / 0评论 2019-01-21

JS实现的手机端精简幻灯片效果

本文实例讲述了JS实现的手机端精简幻灯片效果。分享给大家供大家参考，具体如下：。更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript遍历算法与技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript查

wjsgtxy / 0评论 2016-09-05

如何在Ubuntu和其他Linux发行版中创建照片幻灯片

创建照片幻灯片只需点击几下。想象一下，你的朋友和亲戚正在拜访你，并请你展示最近的活动/旅行照片。你将照片保存在计算机上，并整齐地放在单独的文件夹中。如果这些图片每隔几秒自动更改一次，那将会好很多。在 Ubuntu 18.04 和其他 Linux 发行版中创

zhongguomin / 0评论 2018-09-26

jquery mobile移动端幻灯片滑动切换效果

自动适应设备的宽度，滑动会切换大图，底部导航跟随切换。使用的jquery_mobile插件，引入1.4.5的插件，CSS表和jquery库即可，除了ID,CLASS命名可能会和你项目重复，改成单独即可，其他应该没有重复的，因为本脚本使用计时器写的，加入了方

88491874 / 0评论 2017-01-14

jQuery实现的小图列表，大图展示效果幻灯片示例

本文实例讲述了jQuery实现的小图列表，大图展示效果幻灯片。分享给大家供大家参考，具体如下：

mzoy / 0评论 2016-10-25

基于JSON格式数据的简单jQuery幻灯片插件(jquery-slider)

jquery-slider是一款基于JSON格式数据的jQuery幻灯片插件。该幻灯片通过JSON数据来提供图片地址和描述信息等，你可以通过更换JSON数据来动态切换不同的图片。在页面中引入jquery和slider.js文件和font-awesome字体

86443468 / 0评论 2016-08-10

jQuery模拟360浏览器切屏效果幻灯片(附demo源码下载)

#desktop ul { padding:0; border-bottom-style:none; width:5000px; list-style:none; }. #controller li { width:40px; float:left; pa

Clarence / 0评论 2016-01-29