纯CSS完成，带上下滚动以及预览图的相册成果,无JavaScript，无Iframe，简略适用
正在网页<head>区增加如下代码
[code]
<style type="text/css">
#gallery {
width:750px;
height:550px;
margin:0 auto;
position:relative;
font-family:verdana, arial, sans-serif;
background:#fff;
}
#gallery #slides {position:absolute; right:10px; top:0; height:550px; width:92px; overflow:hidden; text-align:center; z-index:500;}
#gallery #slides div {width:92px; height:550px; position:relative; padding-top:10px;}
#gallery #slides div ul {padding:0; margin:0; list-style:none; width:92px; height:550px}
#gallery #slides div ul li {float:left; padding:1px 0; width:92px; height:69px;}
#gallery #slides div ul li a {display:block; width:92px; height:69px; float:left;}
#gallery #slides div ul li a b {display:none;}
#gallery #slides div ul li a.previous {background:url(double-click/up.png) no-repeat center center;}
#gallery #slides div ul li a.next {background:url(double-click/down.png) no-repeat center center;}
#gallery #slides div ul li a img {display:block; width:92px; height:69px; border:0;}
#gallery #slides div ul li img.blank {margin:0 auto; padding-top:11px;}
#gallery #slides div ul li a:focus {outline:0;}
#gallery #fullsize {position:absolute; left:0; top:0; height:550px; width:750px; overflow:hidden; text-align:center; z-index:200;}
#gallery #fullsize div {width:750px; height:700px; padding-top:70px; position:relative;}
#gallery #fullsize div img {clear:both; display:block; margin:0 auto; border:1px solid #eee; width:480px; height:360px; position:relative; background:#fff; padding:10px;}
#gallery #fullsize div h3 {padding:10px 0 0 0; margin:0; font-size:18px;}
#gallery #fullsize div p {padding:5px 135px; margin:0; font-size:12px; line-height:18px;}
</style>
[/code]
正在网页<body>区增加如下代码
[code]
<div id="gallery">
<div id="slides">
<div id="slide1">
<ul>
<li><img class="blank" src="double-click/upx.png" alt="" /></li>
<li><a href="#pic1"><img src="double-click/pic1.jpg" alt="Winter branches" /></a></li>
<li><a href="#pic2"><img src="double-click/pic2.jpg" alt="Wading birds" /></a></li>
<li><a href="#pic3"><img src="double-click/pic3.jpg" alt="Bird on a post" /></a></li>
<li><a href="#pic4"><img src="double-click/pic4.jpg" alt="Early bloomers" /></a></li>
<li><a href="#pic5"><img src="double-click/pic5.jpg" alt="Green lizard" /></a></li>
<li><a href="#slide2" class="next"><b>Next</b></a></li>
</ul>
</div>
<div id="slide2">
<ul>
<li><a href="#slide1" class="previous"><b>Previous</b></a></li>
<li><a href="#pic2"><img src="double-click/pic2.jpg" alt="Wading birds" /></a></li>
<li><a href="#pic3"><img src="double-click/pic3.jpg" alt="Bird on a post" /></a></li>
<li><a href="#pic4"><img src="double-click/pic4.jpg" alt="Early bloomers" /></a></li>
<li><a href="#pic5"><img src="double-click/pic5.jpg" alt="Green lizard" /></a></li>
<li><a href="#pic6"><img src="double-click/pic6.jpg" alt="Feeding the birds" /></a></li>
<li><a href="#slide3" class="next"><b>Next</b></a></li>
</ul>
</div>
<div id="slide3">
<ul>
<li><a href="#slide2" class="previous"><b>Previous</b></a></li>
<li><a href="#pic3"><img src="double-click/pic3.jpg" alt="Bird on a post" /></a></li>
<li><a href="#pic4"><img src="double-click/pic4.jpg" alt="Early bloomers" /></a></li>
<li><a href="#pic5"><img src="double-click/pic5.jpg" alt="Green lizard" /></a></li>
<li><a href="#pic6"><img src="double-click/pic6.jpg" alt="Feeding the birds" /></a></li>
<li><a href="#pic7"><img src="double-click/pic7.jpg" alt="A group of butterflies" /></a></li>
<li><a href="#slide4" class="next"><b>Next</b></a></li>
</ul>
</div>
<div id="slide4">
<ul>
<li><a href="#slide3" class="previous"><b>Previous</b></a></li>
<li><a href="#pic4"><img src="double-click/pic4.jpg" alt="Early bloomers" /></a></li>
<li><a href="#pic5"><img src="double-click/pic5.jpg" alt="Green lizard" /></a></li>
<li><a href="#pic6"><img src="double-click/pic6.jpg" alt="Feeding the birds" /></a></li>
<li><a href="#pic7"><img src="double-click/pic7.jpg" alt="A group of butterflies" /></a></li>
<li><a href="#pic8"><img src="double-click/pic8.jpg" alt="Ladybirds" /></a></li>
<li><a href="#slide5" class="next"><b>Next</b></a></li>
</ul>
</div>
<div id="slide5">
<ul>
<li><a href="#slide4" class="previous"><b>Previous</b></a></li>
<li><a href="#pic5"><img src="double-click/pic5.jpg" alt="Green lizard" /></a></li>
<li><a href="#pic6"><img src="double-click/pic6.jpg" alt="Feeding the birds" /></a></li>
<li><a href="#pic7"><img src="double-click/pic7.jpg" alt="A group of butterflies" /></a></li>
<li><a href="#pic8"><img src="double-click/pic8.jpg" alt="Ladybirds" /></a></li>
<li><a href="#pic9"><img src="double-click/pic9.jpg" alt="Butterfly" /></a></li>
<li><a href="#slide6" class="next"><b>Next</b></a></li>
</ul>
</div>
<div id="slide6">
<ul>
<li><a href="#slide5" class="previous"><b>Previous</b></a></li>
<li><a href="#pic6"><img src="double-click/pic6.jpg" alt="Feeding the birds" /></a></li>
<li><a href="#pic7"><img src="double-click/pic7.jpg" alt="A group of butterflies" /></a></li>
<li><a href="#pic8"><img src="double-click/pic8.jpg" alt="Ladybirds" /></a></li>
<li><a href="#pic9"><img src="double-click/pic9.jpg" alt="Butterfly" /></a></li>
<li><a href="#pic10"><img src="double-click/pic10.jpg" alt="Trees in the mist" /></a></li>
<li><img class="blank" src="double-click/downx.png" alt="" /></li>
</ul>
</div>
</div>
<div id="fullsize">
<div id="pic1">
<img src="double-click/pic1.jpg" alt="Winter branches" />
<h3>Winter branches</h3>
<p>Followed by some descriptive text and maybe a <a href="//www.sharejs.com/">link</a>.</p>
</div>
<div id="pic2">
<img src="double-click/pic2.jpg" alt="Wading birds" />
<h3>Wading birds</h3>
<p>Another piece of descriptive text and again a <a href="//www.sharejs.com/">link</a>.</p>
</div>
<div id="pic3">
<img src="double-click/pic3.jpg" alt="Bird on a post" />
<h3>Bird on a post</h3>
<p>Yet more descriptive text and maybe a <a href="//www.sharejs.com/">link</a>.</p>
</div>
<div id="pic4">
<img src="double-click/pic4.jpg" alt="Early bloomers" />
<h3>Early bloomers</h3>
<p>And another line of descriptive text and maybe a <a href="//www.sharejs.com/">link</a>.</p>
</div>
<div id="pic5">
<img src="double-click/pic5.jpg" alt="Green lizard" />
<h3>Green lizard</h3>
<p>With descriptive text and maybe a <a href="//www.sharejs.com/">link</a>.</p>
</div>
<div id="pic6">
<img src="double-click/pic6.jpg" alt="Feeding the birds" />
<h3>Feeding the birds</h3>
<p>A description of the picture can go here with a <a href="//www.sharejs.com/">link</a>.</p>
</div>
<div id="pic7">
<img src="double-click/pic7.jpg" alt="A group of butterflies" />
<h3>A group of butterflies</h3>
<p>Descriptive text and maybe a <a href="//www.sharejs.com/">link</a>.</p>
</div>
<div id="pic8">
<img src="double-click/pic8.jpg" alt="Ladybirds" />
<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="//www.sharejs.com/">link</a> can be used if you want.</p>
</div>
<div id="pic9">
<img src="double-click/pic9.jpg" alt="Butterfly" />
<h3>Butterfly</h3>
<p>Followed by some descriptive text and maybe a <a href="//www.sharejs.com/">link</a>.</p>
</div>
<div id="pic10">
<img src="double-click/pic10.jpg" alt="Trees in the mist" />
<h3>Trees in the mist</h3>
<p>Another piece of descriptive text and maybe a <a href="//www.sharejs.com/">link</a>.</p>
</div>
</div>
</div>
[/code]
正在网页<head>区增加如下代码
[code]
<style type="text/css">
#gallery {
width:750px;
height:550px;
margin:0 auto;
position:relative;
font-family:verdana, arial, sans-serif;
background:#fff;
}
#gallery #slides {position:absolute; right:10px; top:0; height:550px; width:92px; overflow:hidden; text-align:center; z-index:500;}
#gallery #slides div {width:92px; height:550px; position:relative; padding-top:10px;}
#gallery #slides div ul {padding:0; margin:0; list-style:none; width:92px; height:550px}
#gallery #slides div ul li {float:left; padding:1px 0; width:92px; height:69px;}
#gallery #slides div ul li a {display:block; width:92px; height:69px; float:left;}
#gallery #slides div ul li a b {display:none;}
#gallery #slides div ul li a.previous {background:url(double-click/up.png) no-repeat center center;}
#gallery #slides div ul li a.next {background:url(double-click/down.png) no-repeat center center;}
#gallery #slides div ul li a img {display:block; width:92px; height:69px; border:0;}
#gallery #slides div ul li img.blank {margin:0 auto; padding-top:11px;}
#gallery #slides div ul li a:focus {outline:0;}
#gallery #fullsize {position:absolute; left:0; top:0; height:550px; width:750px; overflow:hidden; text-align:center; z-index:200;}
#gallery #fullsize div {width:750px; height:700px; padding-top:70px; position:relative;}
#gallery #fullsize div img {clear:both; display:block; margin:0 auto; border:1px solid #eee; width:480px; height:360px; position:relative; background:#fff; padding:10px;}
#gallery #fullsize div h3 {padding:10px 0 0 0; margin:0; font-size:18px;}
#gallery #fullsize div p {padding:5px 135px; margin:0; font-size:12px; line-height:18px;}
</style>
[/code]
正在网页<body>区增加如下代码
[code]
<div id="gallery">
<div id="slides">
<div id="slide1">
<ul>
<li><img class="blank" src="double-click/upx.png" alt="" /></li>
<li><a href="#pic1"><img src="double-click/pic1.jpg" alt="Winter branches" /></a></li>
<li><a href="#pic2"><img src="double-click/pic2.jpg" alt="Wading birds" /></a></li>
<li><a href="#pic3"><img src="double-click/pic3.jpg" alt="Bird on a post" /></a></li>
<li><a href="#pic4"><img src="double-click/pic4.jpg" alt="Early bloomers" /></a></li>
<li><a href="#pic5"><img src="double-click/pic5.jpg" alt="Green lizard" /></a></li>
<li><a href="#slide2" class="next"><b>Next</b></a></li>
</ul>
</div>
<div id="slide2">
<ul>
<li><a href="#slide1" class="previous"><b>Previous</b></a></li>
<li><a href="#pic2"><img src="double-click/pic2.jpg" alt="Wading birds" /></a></li>
<li><a href="#pic3"><img src="double-click/pic3.jpg" alt="Bird on a post" /></a></li>
<li><a href="#pic4"><img src="double-click/pic4.jpg" alt="Early bloomers" /></a></li>
<li><a href="#pic5"><img src="double-click/pic5.jpg" alt="Green lizard" /></a></li>
<li><a href="#pic6"><img src="double-click/pic6.jpg" alt="Feeding the birds" /></a></li>
<li><a href="#slide3" class="next"><b>Next</b></a></li>
</ul>
</div>
<div id="slide3">
<ul>
<li><a href="#slide2" class="previous"><b>Previous</b></a></li>
<li><a href="#pic3"><img src="double-click/pic3.jpg" alt="Bird on a post" /></a></li>
<li><a href="#pic4"><img src="double-click/pic4.jpg" alt="Early bloomers" /></a></li>
<li><a href="#pic5"><img src="double-click/pic5.jpg" alt="Green lizard" /></a></li>
<li><a href="#pic6"><img src="double-click/pic6.jpg" alt="Feeding the birds" /></a></li>
<li><a href="#pic7"><img src="double-click/pic7.jpg" alt="A group of butterflies" /></a></li>
<li><a href="#slide4" class="next"><b>Next</b></a></li>
</ul>
</div>
<div id="slide4">
<ul>
<li><a href="#slide3" class="previous"><b>Previous</b></a></li>
<li><a href="#pic4"><img src="double-click/pic4.jpg" alt="Early bloomers" /></a></li>
<li><a href="#pic5"><img src="double-click/pic5.jpg" alt="Green lizard" /></a></li>
<li><a href="#pic6"><img src="double-click/pic6.jpg" alt="Feeding the birds" /></a></li>
<li><a href="#pic7"><img src="double-click/pic7.jpg" alt="A group of butterflies" /></a></li>
<li><a href="#pic8"><img src="double-click/pic8.jpg" alt="Ladybirds" /></a></li>
<li><a href="#slide5" class="next"><b>Next</b></a></li>
</ul>
</div>
<div id="slide5">
<ul>
<li><a href="#slide4" class="previous"><b>Previous</b></a></li>
<li><a href="#pic5"><img src="double-click/pic5.jpg" alt="Green lizard" /></a></li>
<li><a href="#pic6"><img src="double-click/pic6.jpg" alt="Feeding the birds" /></a></li>
<li><a href="#pic7"><img src="double-click/pic7.jpg" alt="A group of butterflies" /></a></li>
<li><a href="#pic8"><img src="double-click/pic8.jpg" alt="Ladybirds" /></a></li>
<li><a href="#pic9"><img src="double-click/pic9.jpg" alt="Butterfly" /></a></li>
<li><a href="#slide6" class="next"><b>Next</b></a></li>
</ul>
</div>
<div id="slide6">
<ul>
<li><a href="#slide5" class="previous"><b>Previous</b></a></li>
<li><a href="#pic6"><img src="double-click/pic6.jpg" alt="Feeding the birds" /></a></li>
<li><a href="#pic7"><img src="double-click/pic7.jpg" alt="A group of butterflies" /></a></li>
<li><a href="#pic8"><img src="double-click/pic8.jpg" alt="Ladybirds" /></a></li>
<li><a href="#pic9"><img src="double-click/pic9.jpg" alt="Butterfly" /></a></li>
<li><a href="#pic10"><img src="double-click/pic10.jpg" alt="Trees in the mist" /></a></li>
<li><img class="blank" src="double-click/downx.png" alt="" /></li>
</ul>
</div>
</div>
<div id="fullsize">
<div id="pic1">
<img src="double-click/pic1.jpg" alt="Winter branches" />
<h3>Winter branches</h3>
<p>Followed by some descriptive text and maybe a <a href="//www.sharejs.com/">link</a>.</p>
</div>
<div id="pic2">
<img src="double-click/pic2.jpg" alt="Wading birds" />
<h3>Wading birds</h3>
<p>Another piece of descriptive text and again a <a href="//www.sharejs.com/">link</a>.</p>
</div>
<div id="pic3">
<img src="double-click/pic3.jpg" alt="Bird on a post" />
<h3>Bird on a post</h3>
<p>Yet more descriptive text and maybe a <a href="//www.sharejs.com/">link</a>.</p>
</div>
<div id="pic4">
<img src="double-click/pic4.jpg" alt="Early bloomers" />
<h3>Early bloomers</h3>
<p>And another line of descriptive text and maybe a <a href="//www.sharejs.com/">link</a>.</p>
</div>
<div id="pic5">
<img src="double-click/pic5.jpg" alt="Green lizard" />
<h3>Green lizard</h3>
<p>With descriptive text and maybe a <a href="//www.sharejs.com/">link</a>.</p>
</div>
<div id="pic6">
<img src="double-click/pic6.jpg" alt="Feeding the birds" />
<h3>Feeding the birds</h3>
<p>A description of the picture can go here with a <a href="//www.sharejs.com/">link</a>.</p>
</div>
<div id="pic7">
<img src="double-click/pic7.jpg" alt="A group of butterflies" />
<h3>A group of butterflies</h3>
<p>Descriptive text and maybe a <a href="//www.sharejs.com/">link</a>.</p>
</div>
<div id="pic8">
<img src="double-click/pic8.jpg" alt="Ladybirds" />
<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="//www.sharejs.com/">link</a> can be used if you want.</p>
</div>
<div id="pic9">
<img src="double-click/pic9.jpg" alt="Butterfly" />
<h3>Butterfly</h3>
<p>Followed by some descriptive text and maybe a <a href="//www.sharejs.com/">link</a>.</p>
</div>
<div id="pic10">
<img src="double-click/pic10.jpg" alt="Trees in the mist" />
<h3>Trees in the mist</h3>
<p>Another piece of descriptive text and maybe a <a href="//www.sharejs.com/">link</a>.</p>
</div>
</div>
</div>
[/code]
版权声明：除非特别标注，否则均为本站原创文章，转载时请以链接形式注明文章出处。
