jQuery帶按鈕控制圖片層疊切換特效



87 344 115



特效描述: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.cqetom.live/"><img class="default" src="images/pic01.jpg" width="500" height="373" alt="htmlsucai" /></a>
			<a href="http://www.cqetom.live/"><img class="default" src="images/pic02.jpg" width="500" height="373" alt="htmlsucai" /></a>
			<a href="http://www.cqetom.live/"><img class="default" src="images/pic03.jpg" width="500" height="373" alt="htmlsucai" /></a>
			<a href="http://www.cqetom.live/"><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

加群請備注:從官網了解到

老夫子电子