无Javascript、无iframe，完全依靠CSS样式实现的幻灯效果，简单实用
<!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>纯CSS实现的可向前、向后的幻灯片效果 - 分享JavaScript-sharejs.com</title>
<meta name="Copyright" content="JavaScript分享网 http://www.sharejs.com/" />
<meta name="description" content="纯CSS实现的可向前、向后的幻灯片效果,JavaScript分享网" />
<meta content="JavaScript,分享,JavaScript代码,Ajax" name="keywords" />
<style type="text/css">
/* ================================================================
This copyright notice must be untouched at all times.
The original version of this stylesheet and the associated (x)html
is available at http://www.sharejs.com/menu/click-gallery-previous-next.html
Copyright (c) 2005-2009 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */
#gallery {
width:640px;
height:750px;
margin:0 auto;
position:relative;
font-family:verdana, arial, sans-serif;
}
#gallery a.previous {display:block; height:40px; width:32px; background:url(click/previous.gif); position:absolute; left:0; top:560px;}
#gallery a.next {display:block; height:40px; width:32px; background:url(click/next.gif); position:absolute; right:0; top:560px;}
#gallery a b {display:none;}
#gallery #fullsize {
position:absolute;
left:0;
top:0;
height:800px;
width:640px;
overflow:hidden;
text-align:center;
}
#gallery #fullsize div {width:640px; height:900px; padding-top:10px; position:relative;}
#gallery #fullsize div img {clear:both; display:block; margin:0 auto; border:0;}
#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;}
</style>
</head>
<body>
<div id="gallery">
<div id="fullsize">
<div id="pic1">
<img src="click/pic1.jpg" alt="Ballet dancer" />
<a class="previous" href="#pic10"><b>Previous</b></a><a class="next" href="#pic2"><b>Next</b></a>
<h3>Ballet dancer</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/pic2.jpg" alt="Beetle on a daisy" />
<a class="previous" href="#pic1"><b>Previous</b></a><a class="next" href="#pic3"><b>Next</b></a>
<h3>Beetle on daisy</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/pic3.jpg" alt="Misty landscape" />
<a class="previous" href="#pic2"><b>Previous</b></a><a class="next" href="#pic4"><b>Next</b></a>
<h3>Misty landscape</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/pic4.jpg" alt="Bird of prey" />
<a class="previous" href="#pic3"><b>Previous</b></a><a class="next" href="#pic5"><b>Next</b></a>
<h3>Bird of prey</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/pic5.jpg" alt="Bird on barbed wire" />
<a class="previous" href="#pic4"><b>Previous</b></a><a class="next" href="#pic6"><b>Next</b></a>
<h3>Bird on barbed wire</h3>
<p>With descriptive text and maybe a <a href="http://www.sharejs.com/">link</a>.</p>
</div>
<div id="pic6">
<img src="click/pic6.jpg" alt="Isn't he cute" />
<a class="previous" href="#pic5"><b>Previous</b></a><a class="next" href="#pic7"><b>Next</b></a>
<h3>Isn't he cute?</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/pic7.jpg" alt="Ladybirds" />
<a class="previous" href="#pic6"><b>Previous</b></a><a class="next" href="#pic8"><b>Next</b></a>
<h3>Ladybirds</h3>
<p>Descriptive text and maybe a <a href="http://www.sharejs.com/">link</a>.</p>
</div>
<div id="pic8">
<img src="click/pic8.jpg" alt="Dragonfly" />
<a class="previous" href="#pic7"><b>Previous</b></a><a class="next" href="#pic9"><b>Next</b></a>
<h3>Dragonfly</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/pic9.jpg" alt="Grasshopper" />
<a class="previous" href="#pic8"><b>Previous</b></a><a class="next" href="#pic10"><b>Next</b></a>
<h3>Grasshopper</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/pic10.jpg" alt="Green lizard" />
<a class="previous" href="#pic9"><b>Previous</b></a><a class="next" href="#pic1"><b>Next</b></a>
<h3>Green lizard</h3>
<p>Another piece of descriptive text and maybe a <a href="http://www.sharejs.com/">link</a>.</p>
</div>
</div>
</div>
<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>
