首页 > JavaScript代码 > 图片.相册.幻灯片 Image > 详细内容

基于CSS3的幻灯片效果
兼容性：IE6+ FireFox2+ Opera9+   更新时间：2010-01-27

简介：本效果通过CSS3的新功能实现，把所有的图片拼成 一张大图，然后通过CSS3分片显示，效果非常不错，没有任何JS代码


基于CSS3的幻灯片效果

查看源代码：查看




使用说明：
    下载
点击这里下载脚本源代码


在网页<head>区添加以下代码

<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>



在网页<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 -->


下载：     从本地下载

出处：http://www.cssplay.co.uk

分享到： 更多

上一篇： 纯CSS实现商品图片点击放大效果，带有大图关闭按钮   下一篇: CSS3实现的相册，点小图可看大图