详细内容

纯CSS带预览功能、可前后翻页的幻灯片效果
兼容性：IE6+ FireFox2+ Opera9+ 更新时间：2010-1-26

简介：纯CSS实现，无javascript代码，带前后翻页功能，并且有前后图的预览图

查看全部代码：查看

代码使用方法：

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

<style type="text/css">

#gallery {
	width:750px;
	height:500px;
	margin:0 auto;
	position:relative;
	font-family:verdana, arial, sans-serif;
	background:#f8f8f8;
	border-top:1px solid #ddd;
	border-bottom:1px solid #ddd;
}
#gallery #fullsize {
	position:absolute;
	left:0;
	top:0;
	height:500px;
	width:750px;
	overflow:hidden;
	text-align:center;
}
#gallery #fullsize div {width:750px; height:700px; padding-top:20px; position:relative;}
#gallery #fullsize div img {clear:both; display:block; margin:0 auto; border:10px solid #fff; width:480px; height:360px; position:relative; z-index:500;}
#gallery #fullsize div h3 {padding:10px 0 0 0; margin:0; font-size:18px;}
#gallery #fullsize div p {padding:5px 0; margin:0; font-size:12px; line-height:18px;}

#gallery #fullsize a.previous {display:block; height:120px; width:180px; position:absolute; left:10px; top:200px; z-index:10; border:10px solid #fff;}
#gallery #fullsize a.next {display:block; height:120px; width:180px; position:absolute; right:10px; top:200px; z-index:10; border:10px solid #fff;}

#gallery #fullsize a.previous img,
#gallery #fullsize a.next img {width:180px; height:120px; border:0; display:block; filter: alpha(opacity=40); opacity:0.4;}

#gallery #fullsize a:hover {direction:ltr; z-index:600;}
#gallery #fullsize a:hover img {filter: alpha(opacity=80); opacity:0.8;}


</style>

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

Select All

<div id="gallery">
	<div id="fullsize">
		<div id="pic1">
			<img src="click-fade/pic1.jpg" alt="Winter branches" />
			<a class="previous" href="#pic10"><img src="click-fade/pic10.jpg" alt="Trees in the mist" /></a><a class="next" href="#pic2"><img src="click-fade/pic2.jpg" alt="Wading birds" /></a>
			<h3>Winter branches</h3>
			<p>Followed by some descriptive text and maybe a <a href="http://www.sharejs.com/">link</a>.</p>
		</div>
		<div id="pic2">
			<img src="click-fade/pic2.jpg" alt="Wading birds" />
			<a class="previous" href="#pic1"><img src="click-fade/pic1.jpg" alt="Winter branches" /></a><a class="next" href="#pic3"><img src="click-fade/pic3.jpg" alt="Bird on a post" /></a>
			<h3>Wading birds</h3>
			<p>Another piece of descriptive text and again a <a href="http://www.sharejs.com/">link</a>.</p>
		</div>
		<div id="pic3">
			<img src="click-fade/pic3.jpg" alt="Bird on a post" />
			<a class="previous" href="#pic2"><img src="click-fade/pic2.jpg" alt="Wading birds" /></a><a class="next" href="#pic4"><img src="click-fade/pic4.jpg" alt="Early bloomers" /></a>
			<h3>Bird on a post</h3>
			<p>Yet more descriptive text and maybe a <a href="http://www.sharejs.com/">link</a>.</p>
		</div>
		<div id="pic4">
			<img src="click-fade/pic4.jpg" alt="Early bloomers" />
			<a class="previous" href="#pic3"><img src="click-fade/pic3.jpg" alt="Bird on a post" /></a><a class="next" href="#pic5"><img src="click-fade/pic5.jpg" alt="Green lizard" /></a>
			<h3>Early bloomers</h3>
			<p>And another line of descriptive text and maybe a <a href="http://www.sharejs.com/">link</a>.</p>
		</div>
		<div id="pic5">
			<img src="click-fade/pic5.jpg" alt="Green lizard" />
			<a class="previous" href="#pic4"><img src="click-fade/pic4.jpg" alt="Early bloomers" /></a><a class="next" href="#pic6"><img src="click-fade/pic6.jpg" alt="Feeding the birds" /></a>
			<h3>Green lizard</h3>
			<p>With descriptive text and maybe a <a href="http://www.sharejs.com/">link</a>.</p>
		</div>
		<div id="pic6">
			<img src="click-fade/pic6.jpg" alt="Feeding the birds" />
			<a class="previous" href="#pic5"><img src="click-fade/pic5.jpg" alt="Green lizard" /></a><a class="next" href="#pic7"><img src="click-fade/pic7.jpg" alt="A group of butterflies" /></a>
			<h3>Feeding the birds</h3>
			<p>A description of the picture can go here with a <a href="http://www.sharejs.com/">link</a>.</p>
		</div>
		<div id="pic7">
			<img src="click-fade/pic7.jpg" alt="A group of butterflies" />
			<a class="previous" href="#pic6"><img src="click-fade/pic6.jpg" alt="Feeding the birds" /></a><a class="next" href="#pic8"><img src="click-fade/pic8.jpg" alt="Ladybirds" /></a>
			<h3>A group of butterflies</h3>
			<p>Descriptive text and maybe a <a href="http://www.sharejs.com/">link</a>.</p>
		</div>
		<div id="pic8">
			<img src="click-fade/pic8.jpg" alt="Ladybirds" />
			<a class="previous" href="#pic7"><img src="click-fade/pic7.jpg" alt="A group of butterflies" /></a><a class="next" href="#pic9"><img src="click-fade/pic9.jpg" alt="Butterfly" /></a>
			<h3>Ladybirds</h3>
			<p>The text can be over as many lines as you want, but you may need to adjust the size of the containing div to make sure that it can all be seen. The <a href="http://www.sharejs.com/">link</a> can be used if you want.</p>
		</div>
		<div id="pic9">
			<img src="click-fade/pic9.jpg" alt="Butterfly" />
			<a class="previous" href="#pic8"><img src="click-fade/pic8.jpg" alt="Ladybirds" /></a><a class="next" href="#pic10"><img src="click-fade/pic10.jpg" alt="Trees in the mist" /></a>
			<h3>Butterfly</h3>
			<p>Followed by some descriptive text and maybe a <a href="http://www.sharejs.com/">link</a>.</p>
		</div>
		<div id="pic10">
			<img src="click-fade/pic10.jpg" alt="Trees in the mist" />
			<a class="previous" href="#pic9"><img src="click-fade/pic9.jpg" alt="Butterfly" /></a><a class="next" href="#pic1"><img src="click-fade/pic1.jpg" alt="Winter branches" /></a>
			<h3>Trees in the mist</h3>
			<p>Another piece of descriptive text and maybe a <a href="http://www.sharejs.com/">link</a>.</p>
		</div>
	</div>
</div>

下载：从本地下载

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

上一篇：纯CSS实现的可向前、向后的幻灯片效果下一篇：纯CSS实现，带上下滚动和预览图的相册效果