jQuery带按钮控制图片层叠切换特效



83 330 111



特效描述:jQuery 带按钮控制 图片层叠切换,jQuery带按钮控制图片层叠切换特效

代码结构

1. 引入JS

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

2. HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head> 
<title>jQuery带按钮控制图片层叠切换特效</title>
<meta name="description" content="jquery图片叠加切换,用div css样式布局来控制图片叠加显示,在通过左右按钮来控制图片切换,图片放大缩小切换展示的过程。" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
a{text-decoration:none;}
a img{border:none;}
/* demo */
.demo{width:680px;margin:0 auto;}
.demo h2{text-align:center;margin:30px 0 20px 0;font-size:16px;}
.demo p{line-height:22px;}
/* stage */
#stage{width:400px;text-align:center;margin:80px auto 0 auto;position:relative;}
#stage img{position:absolute;}
#next, #previous{width:29px;height:43px;overflow:hidden;cursor:pointer;}
#previous{background:url(images/prev-button.png) no-repeat;}
#next{background:url(images/next-button.png) no-repeat;}
</style>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> 
<script type="text/javascript" src="js/stacking.js"></script> 
<script type="text/javascript" >
$(function(){
	$('#stage').stack({
		width:500,  // 堆叠图库图片的宽度
		height:300	// 堆叠图库图片的高度
	});
});
</script>
</head>
<body >
	<div class="demo">
		<h2>jquery堆叠/层叠加图片幻灯片</h2>
		<p>学习如何建立一个简单,整齐堆叠使用CSS和jQuery的图片库。</p>
		<p>点击观看演示下面的链接,查看堆叠的图片库。画像层叠一个在另一个之后,点击“下一步”按钮,进入到后面的第一图像和下一个图像显示在前面。</p>
		<div id="stage"> 
			<div id="previous"></div>
			<a href="http://www.51qianduan.com/"><img class="default" src="images/pic01.jpg" width="500" height="373" alt="htmlsucai" /></a>
			<a href="http://www.51qianduan.com/"><img class="default" src="images/pic02.jpg" width="500" height="373" alt="htmlsucai" /></a>
			<a href="http://www.51qianduan.com/"><img class="default" src="images/pic03.jpg" width="500" height="373" alt="htmlsucai" /></a>
			<a href="http://www.51qianduan.com/"><img class="default" src="images/pic04.jpg" width="500" height="373" alt="htmlsucai" /></a>
			<div id="next"></div>
		</div><!--stage end-->
	</div>
</body>
</html>



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


热门标签: 滚动切换 滚动条切换 滑动选项卡 滑动切换 叠加浮动层 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 滑动手风琴 层叠叠加 叠加层叠 层叠 叠加 加载更多 切换按钮 表单 表单美化 表单插件 表单美化插件 图片叠加 图片层叠 图片切换 图片选项卡 图标选项卡 按钮控制

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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