HTML5全屏多版面切换幻灯片特效代码下载



38 148 50



特效描述:HTML5 全屏多版面 切换幻灯片,HTML5全屏多版面切换幻灯片特效代码下载

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/slideshow.css" />
<link rel="stylesheet" type="text/css" href="css/slideshow_layouts.css" />

2. 引入JS

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="js/imagesloaded.pkgd.min.js"></script>
<script src="js/anime.min.js"></script>
<script src="js/main.js"></script>

3. HTML代码

<svg class="hidden">
	<defs>
		<symbol id="icon-arrow" viewBox="0 0 24 24">
			<title>arrow</title>
			<polygon points="6.3,12.8 20.9,12.8 20.9,11.2 6.3,11.2 10.2,7.2 9,6 3.1,12 9,18 10.2,16.8 ">
		</symbol>
		<symbol id="icon-drop" viewBox="0 0 24 24">
			<title>drop</title>
			<path d="M12,21c-3.6,0-6.6-3-6.6-6.6C5.4,11,10.8,4,11.4,3.2C11.6,3.1,11.8,3,12,3s0.4,0.1,0.6,0.3c0.6,0.8,6.1,7.8,6.1,11.2C18.6,18.1,15.6,21,12,21zM12,4.8c-1.8,2.4-5.2,7.4-5.2,9.6c0,2.9,2.3,5.2,5.2,5.2s5.2-2.3,5.2-5.2C17.2,12.2,13.8,7.3,12,4.8z"><path d="M12,18.2c-0.4,0-0.7-0.3-0.7-0.7s0.3-0.7,0.7-0.7c1.3,0,2.4-1.1,2.4-2.4c0-0.4,0.3-0.7,0.7-0.7c0.4,0,0.7,0.3,0.7,0.7C15.8,16.5,14.1,18.2,12,18.2z">
		</symbol>
		<symbol id="icon-prev" viewBox="0 0 100 50">
			<title>prev</title>
			<polygon points="5.4,25 18.7,38.2 22.6,34.2 16.2,27.8 94.6,27.8 94.6,22.2 16.2,22.2 22.6,15.8 18.7,11.8">
		</symbol>
		<symbol id="icon-next" viewBox="0 0 100 50">
			<title>next</title>
			<polygon points="81.3,11.8 77.4,15.8 83.8,22.2 5.4,22.2 5.4,27.8 83.8,27.8 77.4,34.2 81.3,38.2 94.6,25 ">
		</symbol>
		<symbol id="icon-octicon" viewBox="0 0 24 24">
			<title>octicon</title>
			<path d="M12,2.2C6.4,2.2,1.9,6.7,1.9,12.2c0,4.4,2.9,8.2,6.9,9.6c0.5,0.1,0.7-0.2,0.7-0.5c0-0.2,0-0.9,0-1.7c-2.8,0.6-3.4-1.4-3.4-1.4C5.6,17.1,5,16.8,5,16.8C4.1,16.2,5,16.2,5,16.2c1,0.1,1.5,1,1.5,1c0.9,1.5,2.4,1.1,2.9,0.8c0.1-0.7,0.4-1.1,0.6-1.3c-2.2-0.3-4.6-1.1-4.6-5c0-1.1,0.4-2,1-2.7C6.5,8.8,6.2,7.7,6.7,6.4c0,0,0.8-0.3,2.8,1C10.3,7.2,11.1,7.1,12,7c0.9,0,1.7,0.1,2.5,0.3c1.9-1.3,2.8-1,2.8-1c0.5,1.4,0.2,2.4,0.1,2.7c0.6,0.7,1,1.6,1,2.7c0,3.9-2.4,4.7-4.6,5c0.4,0.3,0.7,0.9,0.7,1.9c0,1.3,0,2.4,0,2.8c0,0.3,0.2,0.6,0.7,0.5c4-1.3,6.9-5.1,6.9-9.6C22.1,6.7,17.6,2.2,12,2.2z" />
		</symbol>
		<!-- From Karen Menezes: https://www.smashingmagazine.com/2015/05/creating-responsive-shapes-with-clip-path/ -->
		<clipPath id="polygon-clip-rhomboid" clipPathUnits="objectBoundingBox">
			<polygon points="0 1, 0.3 0, 1 0, 0.7 1" />
		</clipPath>
	</defs>
</svg>
<main>
	<div class="slideshow" tabindex="0">
		<div class="slide slide--layout-1" data-layout="layout1">
			<div class="slide-imgwrap">
				<div class="slide__img"><div class="slide__img-inner" style="background-image: url(img/1.jpg);"></div></div>
				<div class="slide__img"><div class="slide__img-inner" style="background-image: url(img/2.jpg);"></div></div>
				<div class="slide__img"><div class="slide__img-inner" style="background-image: url(img/3.jpg);"></div></div>
			</div>
			<div class="slide__title">
				<h3 class="slide__title-main">Now or Never</h3>
			</div>
		</div><!-- /slide -->
		<div class="slide slide--layout-2" data-layout="layout2">
			<div class="slide-imgwrap">
				<div class="slide__img"><div class="slide__img-inner" style="background-image: url(img/6.jpg);"></div></div>
				<div class="slide__img"><div class="slide__img-inner" style="background-image: url(img/5.jpg);"></div></div>
				<div class="slide__img"><div class="slide__img-inner" style="background-image: url(img/6.jpg);"></div></div>
				<div class="slide__img"><div class="slide__img-inner" style="background-image: url(img/7.jpg);"></div></div>
				<div class="slide__img"><div class="slide__img-inner" style="background-image: url(img/9.jpg);"><h4 class="slide__img-caption">Today is someday</h4></div></div>
			</div>
			<div class="slide__title">
				<h3 class="slide__title-main">Crazy Breed</h3>
				<p class="slide__title-sub">There's those thinking more or less less is more. But if less is more how you're keeping score?</p>
			</div>
		</div><!-- /slide -->
		<div class="slide slide--layout-3" data-layout="layout3">
			<div class="slide-imgwrap">
				<div class="slide__img"><div class="slide__img-inner" style="background-image: url(img/9.jpg);"></div></div>
				<div class="slide__img"><div class="slide__img-inner" style="background-image: url(img/10.jpg);"></div></div>
				<div class="slide__img"><div class="slide__img-inner" style="background-image: url(img/11.jpg);"></div></div>
				<div class="slide__img"><div class="slide__img-inner" style="background-image: url(img/15.jpg);"></div></div>
				<div class="slide__img"><div class="slide__img-inner" style="background-image: url(img/13.jpg);"></div></div>
				<div class="slide__img"><div class="slide__img-inner" style="background-image: url(img/14.jpg);"></div></div>
				<div class="slide__img"><div class="slide__img-inner" style="background-image: url(img/12.jpg);"></div></div>
			</div>
			<div class="slide__title">
				<h3 class="slide__title-main">Safe Harbor</h3>
				<p class="slide__title-sub">Twenty years from now you will be more disappointed by the things you didn’t do than by the ones you did do.</p>
			</div>
		</div><!-- /slide -->
		<div class="slide slide--layout-4" data-layout="layout4">
			<div class="slide-imgwrap">
				<div class="slide__img"><div class="slide__img-inner" style="background-image: url(img/10.jpg);"></div></div>
				<div class="slide__img"><div class="slide__img-inner" style="background-image: url(img/8.jpg);"></div></div>
				<div class="slide__img"><div class="slide__img-inner" style="background-image: url(img/11.jpg);"></div></div>
				<div class="slide__img"><div class="slide__img-inner" style="background-image: url(img/13.jpg);"></div></div>
			</div>
			<div class="slide__title">
				<h3 class="slide__title-main">Our Freedom</h3>
				<p class="slide__title-sub">For to be free is not merely to cast off one's chains, but to live in a way that respects and enhances the freedom of others.</p>
			</div>
		</div><!-- /slide -->
		<div class="slide slide--layout-5" data-layout="layout5">
			<div class="slide-imgwrap">
				<div class="slide__img"><div class="slide__img-inner" style="background-image: url(img/small/1.jpg);"></div></div>
				<div class="slide__img"><div class="slide__img-inner" style="background-image: url(img/small/2.jpg);"></div></div>
				<div class="slide__img"><div class="slide__img-inner" style="background-image: url(img/small/3.jpg);"></div></div>
				<div class="slide__img"><div class="slide__img-inner" style="background-image: url(img/small/4.jpg);"></div></div>
				<div class="slide__img"><div class="slide__img-inner" style="background-image: url(img/small/5.jpg);"></div></div>
				<div class="slide__img"><div class="slide__img-inner" style="background-image: url(img/small/6.jpg);"></div></div>
				<div class="slide__img"><div class="slide__img-inner" style="background-image: url(img/small/7.jpg);"></div></div>
				<div class="slide__img"><div class="slide__img-inner" style="background-image: url(img/small/8.jpg);"></div></div>
				<div class="slide__img"><div class="slide__img-inner" style="background-image: url(img/small/9.jpg);"></div></div>
				<div class="slide__img"><div class="slide__img-inner" style="background-image: url(img/small/10.jpg);"></div></div>
				<div class="slide__img"><div class="slide__img-inner" style="background-image: url(img/small/11.jpg);"></div></div>
				<div class="slide__img"><div class="slide__img-inner" style="background-image: url(img/small/12.jpg);"></div></div>
				<div class="slide__img"><div class="slide__img-inner" style="background-image: url(img/small/13.jpg);"></div></div>
				<div class="slide__img"><div class="slide__img-inner" style="background-image: url(img/small/14.jpg);"></div></div>
				<div class="slide__img"><div class="slide__img-inner" style="background-image: url(img/small/15.jpg);"></div></div>
				<div class="slide__img"><div class="slide__img-inner" style="background-image: url(img/small/16.jpg);"></div></div>
				<div class="slide__img"><div class="slide__img-inner" style="background-image: url(img/small/17.jpg);"></div></div>
				<div class="slide__img"><div class="slide__img-inner" style="background-image: url(img/small/18.jpg);"></div></div>
			</div>
			<div class="slide__title">
				<h3 class="slide__title-main">Stopping Time</h3>
				<p class="slide__title-sub">Emancipate yourselves from mental slavery, none but ourselves can free our minds.</p>
			</div>
		</div><!-- /slide -->
		<div class="slide slide--layout-6" data-layout="layout6">
			<div class="slide-imgwrap">
				<div class="slide__img"><div class="slide__img-inner" style="background-image: url(img/14.jpg);"></div></div>
				<div class="slide__img"><div class="slide__img-inner" style="background-image: url(img/11.jpg);"></div></div>
				<div class="slide__img"><div class="slide__img-inner" style="background-image: url(img/3.jpg);"></div></div>
			</div>
			<div class="slide__title">
				<h3 class="slide__title-main">Walk the Walk</h3>
				<p class="slide__title-sub">The trouble with being in the rat race is that even if you win, you're still a rat.</p>
			</div>
		</div><!-- /slide -->
		<div class="slide slide--layout-7" data-layout="layout7">
			<div class="slide-imgwrap">
				<div class="slide__img"><div class="slide__img-inner" style="background-image: url(img/16.jpg);"></div></div>
				<div class="slide__img"><div class="slide__img-inner" style="background-image: url(img/1.jpg);"></div></div>
				<div class="slide__img"><div class="slide__img-inner" style="background-image: url(img/4.jpg);"></div></div>
			</div>
			<div class="slide__title">
				<h3 class="slide__title-main">Caged Birds</h3>
				<p class="slide__title-sub">They told me to grow roots, instead I grew wings. Birds born in a cage think flying is an illness. </p>
			</div>
		</div><!-- /slide -->
		<nav class="slideshow__nav slideshow__nav--arrows">
			<button id="prev-slide" class="btn btn--arrow" aria-label="Previous slide"><svg class="icon icon--prev"><use xlink:href="#icon-prev"></use></svg></button>
			<button id="next-slide" class="btn btn--arrow" aria-label="Next slide"><svg class="icon icon--next"><use xlink:href="#icon-next"></use></svg></button>
		</nav>
	</div><!-- /slideshow -->
</main>
<script>
(function() {
	var slideshow = new MLSlideshow(document.querySelector('.slideshow'));
	document.querySelector('#next-slide').addEventListener('click', function() {
		slideshow.next();
	});
	document.querySelector('#prev-slide').addEventListener('click', function() {
		slideshow.prev();
	});
})();
</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 文字叠加 滑动导航菜单 图片叠加 图片头像上传 滑动选项卡切换 文件上传 图片滑动 文本框 文字滑动 下拉框 滑动手风琴 复选 滑动星星打分 单选 登录框 注册框 搜索框 验证码 二级联动 三级联动 城市选择 value赋值 筛选 按钮控制 购物车 颜色选择 表单提交 全选/反选 添加删除 添加标签 密码强度验证 表单验证 html5按钮动画 按钮样式 密码修改设置 滑动滑过 叠加浮动层 重叠层叠叠加 切换按钮 form表单

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到