jQuery实现倒影叠加幻灯片切换



69 274 92



特效描述:jQuery实现 倒影叠加 幻灯片切换,jQuery实现倒影叠加幻灯片切换

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/demo_viuu.css" />
<link rel="stylesheet" type="text/css" href="css/point_of_viuu_left.css" />
<link rel="stylesheet" type="text/css" href="css/point_of_viuu_ie.css" />

2. 引入JS

<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="js/jquery-perspective-min.js"></script>

3. HTML代码

    	<div id="container">
    		<div class="detail_note_left note1"></div>
			<div class="detail_note_left note2"></div>
			<div class="detail_note_left note3"></div>
			<div class="detail_note_left note4"></div>
    		<div class="header">Point of ViUU, jQuery perspective slideshow plugin</div>
			<!-- Plugin structure begin -->
			<div class="perspective">
    			<div class="perspective_diap">
    				<img src="img/mid_5.jpg" alt="image" />
					<p class="left bottom">Buildings</p>
    			</div>
				<div class="perspective_diap">
					<img src="img/mid_4.jpg" alt="image" />
					<p class="full_width">Architecture title - full width</p>
				</div>
				<div class="perspective_diap">
					<img src="img/mid_3.jpg" alt="image" />
					<p class="left top">Big city<br /><span>You can add a description, and a link.</span></p>
				</div>
				<div class="perspective_diap">
					<img src="img/mid_2.jpg" alt="image" />
					<p class="right bottom">3D architecture</p>
				</div>
				<span class="timer_rota"><span></span></span>
				<span class="pause_rota"></span>
			</div>
			<!-- Plugin structure end -->
    	</div>
<div style="text-align:center;clear:both">
</div>



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


热门标签: 文字叠加 导航切换 图片叠加 带标题的焦点图 带缩略图的幻灯片 带简介的焦点图 图片切换 图片轮播 文字切换 自动滚动图片轮播 背景切换 马赛克幻灯片 手风琴 全屏焦点图 选项卡自动切换 视频切换 列表切换 渐隐切换 全屏切换 切换按钮 缩放切换 滚动切换 滑动选项卡切换 flash焦点图 叠加浮动层 选项卡切换 滑动手风琴 重叠层叠叠加 焦点图幻灯片

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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