用纯CSS写的图片切换,翻页效果..

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml"  xml:lang ="zh"  lang ="zh" >
< head  profile ="http://www.w3.org/2000/08/w3c-synd/#" >
< meta  http-equiv ="content-language"  content ="zh-cn"   />
< meta  http-equiv ="content-type"  content ="text/html;charset=gb2312"   />

< style > ...

dl {...}{
    position:absolute;
    width:240px;
    height:170px;
    border:10px solid #eee;
    }
dd {...}{
    margin:0;
    width:240px;
    height:170px;
    overflow:hidden;
    }
img {...}{
    border:1px solid black
    }
dt {...}{
    position:absolute;
    right:3px;
    top:50px;
    }
a {...}{
    display:block;
    margin:1px;
    width:20px;
    height:20px;
    text-align:center;
    font:700 12px/20px "宋体",sans-serif;
    color:#fff;
    text-decoration:none;
    background:#666;
    border:1px solid #fff;
    filter:alpha(opacity=40);
    opacity:.4;
    }
a:hover {...}{
    background:#000
    }
</ style >
</ head >
< body >
< dl >
< dt >< a  href ="#a"  title ="" > 1 </ a >< a  href ="#b"  title ="" > 2 </ a >< a  href ="#c"  title ="" > 3 </ a ></ dt >
< dd >
< img  src ="http://www.blueidea.com/articleimg/2007/03/4549/1.jpg"  alt =""  title =""  id ="a"   />
< img  src ="http://www.blueidea.com/articleimg/2007/03/4549/2.jpg"  alt =""  title =""  id ="b"   />
< img  src ="http://www.blueidea.com/articleimg/2007/03/4549/3.jpg"  alt =""  title =""  id ="c"   />
</ dd >
</ dl >
</ body >
</ html >