方式一：
<!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>
原文：http://www.cnblogs.com/wishyouhappy/p/3724803.html