効果のスクリーンショット：
効果の紹介：下の小さな画像をクリックすると、上の大きな画像がそれに応じて変化します
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>点击幻灯片</title>
<style>
body{
margin: 0;
padding: 0;
text-align: center;
}
#top{
margin-top: 10px;
height: 500px;
font-size:0px ;
overflow: hidden;
}
#top img{
display: inline-block;
margin: 0 ;
padding: 0;
height: 500px;
width: 750px;
}
#bottom{
margin-bottom: 10px;
height: auto;
width: auto;
}
#bottom div{
display: inline-block;
}
#bottom img{
margin-top: 10px;
height: 100px;
width: 140px;
}
</style>
</head>
<body>
<div id="ad">
<div id="top" class="content">
<div id="img1" >
<img src="img/kof-01.jpg" />
</div>
<div id="img2">
<img src="img/kof-02.jpg" />
</div>
<div id="img3">
<img src="img/kof-03.jpg" />
</div>
<div id="img4">
<img src="img/kof-04.jpg" />
</div>
<div id="img5">
<img src="img/kof-05.jpg" />
</div>
</div>
<div id="bottom">
<div id="1">
<a href="#img1" >
<img src="img/kof-01.jpg" />
</a>
</div>
<div id="2">
<a href="#img2" >
<img src="img/kof-02.jpg" />
</a>
</div>
<div id="3">
<a href="#img3" >
<img src="img/kof-03.jpg" />
</a>
</div>
<div id="4">
<a href="#img4" >
<img src="img/kof-04.jpg" />
</a>
</div>
<div id="5">
<a href="#img5" >
<img src="img/kof-05.jpg" />
</a>
</div>
</div>
</div>
</body>
</html>