css利用锚点控制翻页

今天呱呱发了一个网址给我看，大概效果就是类似幻灯片的效果。当时我的第一反映这个是不是用锚点做的啊呢，以前在网上看过用锚点做的这类的效果。

脑袋里出现这个反映后，一直有“锚点”这2个字浮动着，不肯从我脑子里出去，我的脑袋本来就不大，怎么装得下呢，反正现在暂时没任务，就自己做一个，让“锚点”从自己的小脑袋中离开。

这个也不说什么大概的思路啊什么的，只是利用锚点跳到页面中的某一个位置而已。如果页面内容太多的话，我估计效果不好，所以这个还是用来娱乐一下算了。

结构：

 程序代码

<div class="wrapper">
    <div class="content">
        <div class="box" id="a1">
            <h2>锚点控制内容</h2>
            <p>第一屏</p>
            <p>网上有很多这样的教程，我这个只是娱乐而已</p>
        </div>
        <div class="box" id="a2">
            <h2>锚点控制内容</h2>
            <p>第二屏</p>
        </div>
        <div class="box" id="a3">
            <h2>锚点控制内容</h2>
            <p>第三屏</p>
        </div>
        <div class="box" id="a4">
            <h2>锚点控制内容</h2>
            <p>第四屏</p>
        </div>
        <div class="box" id="a5">
            <h2>锚点控制内容</h2>
            <p>第五屏</p>
            <p>第五屏</p>
            <p>第五屏</p>
            <p>第五屏</p>
            <p>第五屏</p>
            <p>第五屏</p>
            <p>第五屏</p>
            <p>第五屏</p>
            <p>第五屏</p>
            <p>第五屏</p>
        </div>
    </div>
    <div class="pager">
        <a href="#a1" title="">1</a>
        <a href="#a2" title="">2</a>
        <a href="#a3" title="">3</a>
        <a href="#a4" title="">4</a>
        <a href="#a5" title="">5</a>
    </div>
</div>

样式：

 程序代码

* {margin:0;padding:0;}
body {font:normal 12px/1.5em Verdana,Lucida, Arial, Helvetica, "宋体",sans-serif;background:#FCFCFC;}
.wrapper {width:200px;height:200px;position:absolute;top:50％;left:50％;margin:-100px 0 0 -100px;border:1px solid #333333;background:#CCCCCC;}
    .content {width:180px;height:160px;margin:10px auto 0;overflow:hidden;border:1px solid #999999;background:#FFFFFF;}
        .box {float:left;width:160px;height:150px;margin-bottom:10px;padding:10px;overflow:auto;}
    .pager {width:180px;height:20px;margin:5px auto;text-align:right;}
        .pager a {padding:2px 4px;text-decoration:none;background:#FF0000;color:#FFFFFF;}
        .pager a:hover {background:#FFFFFF;outline:#FF0000 1px solid;color:#000000;}

演示地址：http://www.linxz.cn/demo/anchor-hold/anchor-hold.html