CSS实现简易幻灯片功能

要点：善于利用锚点a标签；

原理：

完整代码：

<div class="wrapper">
    <div class="content">
        <div class="box" id="a1">
            <h2>content</h2>
            <p>first</p>
        </div>
        <div class="box" id="a2">
            <h2>content2</h2>
            <p>second</p>
        </div>
        <div class="box" id="a3">
            <p>third</p>
        </div>
        <div class="box" id="a4">
            <p>fouth</p>
        </div>
        <div class="box" id="a5">
            <p>fifth</p>
            <p>fifth</p>
            <p>fifth</p>
        </div>
    </div>
    <div class="pager">
        <a href="#a1">1</a>
        <a href="#a2">2</a>
        <a href="#a3">3</a>
        <a href="#a4">4</a>
        <a href="#a5">5</a>
    </div>
</div>

*{
    margin:0;
    padding:0;
    font:normal 12px/1.5em tahoma;
}
.wrapper{
    width:200px;
    height:200px;
    border:1px solid #333;
    background:#CCC;
}
.content{
    width:180px;
    height:160px;
    margin:10px auto 0;
    overflow:hidden;
    border:1px solid #999;
    background:#fff;
}
.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;
    color:#fff;
    background:#def897;
}
.pager a:hover{
    color:#000;
    background:#fff;
}

 

 

转载于:https://www.cnblogs.com/viltran/archive/2013/04/22/3036784.html