《基于CSS3的幻灯片效果》查看源代码

2010-01-27 17:37:50 | 【大中小】
本效果通过CSS3的新功能实现，把所有的图片拼成一张大图，然后通过CSS3分片显示，效果非常不错，没有任何JS代码
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>基于CSS3的幻灯片效果 - 分享JavaScript-sharejs.com</title>
<meta name="Copyright" content="JavaScript分享网 http://www.sharejs.com/" />
<meta name="description" content="基于CSS3的幻灯片效果,JavaScript分享网" />
<meta content="JavaScript,分享,JavaScript代码,Ajax" name="keywords" />

<style type="text/css">
#wrap {width:580px; height:440px; background: #c5d99f; border:5px solid #e0ebcb; position:relative; margin:30px auto 20px auto;
-o-border-radius: 20px;
-icab-border-radius: 20px;
-khtml-border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
}
#slide {padding:370px 0 0 0; margin:0; list-style:none; width:480px; height:30px; overflow:hidden; position:absolute; left:48px; top:29px;}
#slide b {float:left;}
#slide span {position:absolute; left:0; top:0; height:360px; width:480px; background:#fff url(photo-slide/loading.gif) no-repeat 220px center; border:1px solid #698639; border-color:#698639 #e0ebcb #e0ebcb #698639;}
#slide b.overlay {display:block; width:490px; height:370px; background:transparent; position:absolute; top:-5px; left:-5px;}
#slide i {display:block; float:left; margin-right:5px; display:inline; width:20px; height:20px; background:url(photo-slide/button.gif); color:#000; line-height:19px; font-family:arial, sans-serif; font-style:normal; font-size:11px; text-align:center; cursor:pointer;}
#slide b img {display:block; border:0; position:absolute; top:0; left:-1px;
-webkit-transition: all 0.7s ease-in-out;
}
#title {width:131px; height:132px; background:url(photo-slide/star.png); position:absolute; left:5px; top:-30px; z-index:30;}
* html #title {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='photo-slide/star.png', sizingMethod='crop');}

#slide i:hover {background-position:0 -20px; color:#fff;}

#slide .p1:hover img {left:-1px;}
#slide .p2:hover img {left:-481px;}
#slide .p3:hover img {left:-961px;}
#slide .p4:hover img {left:-1441px;}
#slide .p5:hover img {left:-1921px;}
#slide .p6:hover img {left:-2401px;}
#slide .p7:hover img {left:-2881px;}
#slide .p8:hover img {left:-3361px;}
#slide .p9:hover img {left:-3841px;}
#slide .p10:hover img {left:-4321px;}
}
</style>
</head>
<body>

	<div id="wrap">
		<div id="slide">
				<b class="p1"><i>1</i>
					<b class="p2"><i>2</i>
						<b class="p3"><i>3</i>
							<b class="p4"><i>4</i>
								<b class="p5"><i>5</i>
									<b class="p6"><i>6</i>
										<b class="p7"><i>7</i>
											<b class="p8"><i>8</i>
												<b class="p9"><i>9</i>
													<b class="p10"><i>10</i><span><img src="photo-slide/composite.jpg" alt="" /></span></b>
												</b>
											</b>
										</b>
									</b>
								</b>
							</b>
						</b>
					</b>
				</b>
				<b class="overlay"></b>
		</div> <!-- end slide -->
		<div id="title"></div>
	</div> <!-- end wrap -->
<br><br>
<div align="center">

<script language="javascript" src="http://www.sharejs.com/js/720.js"></script>
<br><br>

获取更多JavaScript代码，请登录JavaScript分享网 <a href="http://www.sharejs.com">http://www.sharejs.com</a>
<br>
转载请注明出处，本代码仅供学习交流，不可用于任何商业用途！
</div>
</body>
</html>
返回《基于CSS3的幻灯片效果》
《基于CSS3的幻灯片效果》 查看源代码

《基于CSS3的幻灯片效果》查看源代码
