详细内容

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

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

查看全部代码：查看

代码使用方法：

下载
点击这里下载脚本源代码

在网页<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>区添加以下代码

下载：从本地下载

出处：[URL]http://www.cssplay.co.uk[/URL] 作者：http://www.cssplay.co.uk

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