09-[案例2]轮播图导航效果

需求：点击轮播图右下角的数字导航，切换到对应的轮播图片

知识点：锚点链接定位

<div id="box">
    <div id="imgbox">
        <img src="img/1.jpg" alt="" id="img1">
        <img src="img/2.jpg" alt="" id="img2">
        <img src="img/3.jpg" alt="" id="img3">
    </div>
    <div id="btnBox">
        <a href="#img1">1</a>
        <a href="#img2">2</a>
        <a href="#img3">3</a>
    </div>
</div>

#box{
    width: 520px;
    height: 280px;
    margin: 30px auto;
    border: 1px solid red;
    position: relative;
}
#imgbox{
    width: 520px;
    height: 280px;
    overflow: hidden;
}
#btnBox a{
    float: left;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    color: #fff;
}
#btnBox{
    width: 90px;
    height: 30px;
    background: rgba(000, 000, 000, 0.5);
    position: absolute;
    right: 30px;
    bottom: 10px;
}