相册特效代码 CSS3带缩略图滑动相册代码

特效描述：利用CSS3实现 带缩略图 滑动相册，利用CSS3实现带缩略图滑动相册

代码结构

1. HTML代码

<h1>Pure CSS Sliding Image Gallery – No JS</h1>
<h3>View in Safari or Chrome</h3>
<p>Works well in Firefox and Opera too but no slidey slidey!<br>
</p>
<div id="box">
<ul id="slider">
<li id="1" >
<img src="images/grass-bl.jpg" alt="grass-blades" width="700" height="438" />
<p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span></p>
</li>
<li id="2">
<img src="images/ladybug.jpg" alt="ladybug" width="700" height="438" />
<p><span>Mind your step!</span></p>
</li>
<li id="3">
<img src="images/lotus.jpg" alt="lotus" width="700" height="438" />
<p><span>This is an image of a big flower!</span></p>
</li>
<li id="4">
<img src="images/stones.jpg" alt="stones" width="700" height="438" />
<p><span>Damn! Those are some nice looking stones!</span></p>
</li>
</ul>
<ul id="thumb">
<li><a href="#1"><img src="images/grass-bl.jpg" alt="grass-blades" width="50" height="50" /></a></li>
<li><a href="#2"><img src="images/ladybug.jpg" alt="ladybug" width="50" height="50" /></a></li>
<li><a href="#3"><img src="images/lotus.jpg" alt="lotus" width="50" height="50" /></a></li>
<li><a href="#4"><img src="images/stones.jpg" alt="stones" width="50" height="50" /></a></li>
</ul>
</div>
<div style="text-align:center;clear:both">
</div>

下载地址

立即下载