html5 3D折页图片滑动幻灯片展示特效



145 576 193



特效描述:html5 3D折页 图片滑动 幻灯片展示特效,html5 3D折页幻灯片特效

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />

2. 引入JS

<script type="text/javascript" src="js/modernizr.custom.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.imgslider.js"></script>

3. HTML代码

<div class="main">
	<div class="fs-slider" id="fs-slider">
		<figure>
			<img src="images/1.jpg" alt="image01" />
			<figcaption>
				<h3>Eloquence</h3>
				<p>American apparel flexitarian put a bird on it, mixtape typewriter irony aesthetic. </p>
			</figcaption>
		</figure>
		<figure>
			<img src="images/2.jpg" alt="image02" />
			<figcaption>
				<h3>Quintessential</h3>
				<p>Cardigan craft beer mixtape, skateboard forage fixie truffaut messenger bag. </p>
			</figcaption>
		</figure>
		<figure>
			<img src="images/3.jpg" alt="image03" />
			<figcaption>
				<h3>Surreptitious</h3>
				<p>Truffaut iphone flexitarian, banh mi thundercats cliche wolf biodiesel gastropub. </p>
			</figcaption>
		</figure>
		<figure>
			<img src="images/4.jpg" alt="image04" />
			<figcaption>
				<h3>Imbroglio</h3>
				<p>Scenester fixie pickled, shoreditch fugiat enim craft beer retro mustache.</p>
			</figcaption>
		</figure>
		<figure>
			<img src="images/5.jpg" alt="image05" />
			<figcaption>
				<h3>Lissome</h3>
				<p>Aute sunt aliqua do sapiente. Food truck ut sustainable thundercats four loko.</p>
			</figcaption>
		</figure>
	</div><!-- /fs-slider -->
</div>
<script type="text/javascript">
$(function() {
	$( '#fs-slider' ).imgslider();
});
</script>



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


热门标签: 滑动 滚动切换 滑动选项卡切换 叠加浮动层 选项卡切换 滑动手风琴 层叠叠加 切换按钮 表单 图片叠加 图片滑动 图片切换 按钮控制

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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