html5棱镜效果图片幻灯片切换代码



107 424 142



特效描述: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/component.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/component.css" />

2. 引入JS

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="js/utils/rAF.js"></script>
<script src="js/utils/easing.js"></script>
<script src="js/PrismSlider.js"></script>
<script src="js/slideshow1.js"></script>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="js/utils/rAF.js"></script>
<script src="js/utils/easing.js"></script>
<script src="js/PrismSlider.js"></script>
<script src="js/slideshow1.js"></script>

3. HTML代码

<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Prism Effect Slider | Demo 1</title>
<meta name="description" content="Prism slider using canvas globalCompositeOperation" />
<meta name="keywords" content="prism, images, globalCompositeOperation, canvas, demo, web design, slider" />
<meta name="author" content="Claudio Calautti for Codrops" />
<link rel="shortcut icon" href="../favicon.ico">
<!--主要样式-->
<!--[if IE]>
<![endif]-->
</head>
<body class="demo-1">
<div class="container">
	<header class="codrops-header">
		<h1>棱镜滑块效果</h1>
		<nav class="codrops-demos">
			<a class="current-demo" href="index.html">Diamond</a>
			<a href="index2.html">Penrose Triangle</a>
			<a href="index3.html">Impossible Cube</a>
		</nav>
	</header>
	<div class="content">
		<!-- Start Demo -->
		<div class="cache">
			<!-- masks -->
			<img src="img/masks/prism-a.svg">
			<img src="img/masks/prism-b.svg">
			<img src="img/masks/prism-c.svg">
			<!-- photos -->
			<img src="img/bird-a.jpg">
			<img src="img/bird-b.jpg">
			<img src="img/bird-c.jpg">
			<img src="img/bird-d.jpg">
		</div>
		<div class="wrapper">
			<div class="prism-slider">
				<ul class="navigation"></ul>
			</div>
			<div class="copy">
				<article>
					<h2>Strange Birds</h2>
					<p>Every bird tells a tale. This is the story of four bird characters and their adventures.</p>
					<p>
						Spend any time watching your gardens birds and you'll soon discover a host of different behaviours. It might be a Blackbird preening its feathers, a group of Starlings whirling about the sky in a pre-roosting flock or a Greenfinch showing a Blue Tit who is boss.
					</p>
				</article>
			</div>
		</div>
		<!-- End Demo -->
	</div>
</div><!-- /container -->
<!-- JS -->
</body>
</html>



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


热门标签: 滑动滑过 滚动切换 滑动选项卡切换 flash焦点图 选项卡切换 滑动手风琴 焦点图幻灯片 图片滑动 图片切换 图片轮播 选项卡自动切换

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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