方式一：
<!DOCTYPE HTML>
<html>
<head>
<style>#cont {
position: relative;
height: 300px;
}
img {
position: absolute;
width: 400px;
height: 300px;
z-index: 1;
}
img:first-child,
img:target {
z-index: 2;
}#pag {
width:400px;
}</style>
</head>
<body>
<div id="cont">
<img id="img1" src="images/1.JPG">
<img id="img2" src="images/2.JPG">
<img id="img3" src="images/3.JPG">
<img id="img4" src="images/4.JPG">
</div>
<div id="pag" align="center">
<a href="#img1">1</a>
<a href="#img2">2</a>
<a href="#img3">3</a>
<a href="#img4">4</a>
</div>
</body>
</html>
方式二：
<!doctype html>
<html>
<head>
<style>
img {
display: none;
width: 400px;
height: 300px;
}input:checked + img {
display: block;
}input {
position: absolute;
left: -9999px;
}label {
cursor: pointer;
}
#pag{
width:400px;
}
</style>
</head>
<body>
<div id="cont">
<input id="img1" name="img" type="radio" checked="checked">
<img src="images/1.JPG">
<input id="img2" name="img" type="radio">
<img src="images/2.JPG">
<input id="img3" name="img" type="radio" checked="checked">
<img src="images/3.JPG">
<input id="img4" name="img" type="radio">
<img src="images/4.JPG">
</div>
<div id="pag" align="center">
<label for="img1">1</label>
<label for="img2">2</label>
<label for="img3">3</label>
<label for="img4">4</label>
</div>
</body>
</html>
