轮播图（二）

步骤二： css布局

　　首先，resetcss，如下所示：

        * {
            margin:0;
            padding:0;
        }
        a{
            text-decoration: none;
        }

　　接着，我们为了让图片只在container中，所以需要限定其宽度和高度并且使用overflow:hidden；将其余的图片隐藏起来，并且我们希望wrap相对于container左右移动，所以设置为relative，如下：

       .container {
            position: relative;
            width: 600px;
            height: 400px;
            margin:100px auto 0 auto;
            box-shadow: 0 0 5px green;
            overflow: hidden;
        }            

　　我们设置wrap是绝对定位的，所以,我们就可以通过控制Left和Right来控制图片的移动了。设置z-index:1;以对后面将要放置的buttons作为参考。 因为共有七张图片，所以width为4200px（每张图片我们设置为600X400）,我们只需让图片左浮动即可实现占满一排了。

        .wrap {
            position: absolute;
            width: 4200px;
            height: 400px;
            z-index: 1;
        }

 　　然后我们把图片设置位左浮动，并限定其大小，如下所示：

    .container .wrap img {
            float: left;
            width: 600px;
            height: 400px;
        }

　　现在的效果如下：

     

　　即这时已经显示出了第一张图片。并且充满了整个container(container是有box-shadow的);

　　然后我们把显示次序的buttons放在图片的右下角。并且设置z-index:2;以保证buttons是在图片的上面的。

       .container .buttons {
            position: absolute;
            right: 150px;
            bottom:20px;
            width: 100px;
            height: 10px;
            z-index: 2;
        }

　　然后将buttons下面的span做一个简单的修饰，并且给和图片对应的span设置一个on类，如下：

        .container .buttons span {
            margin-left: 5px;
            display: inline-block;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: green;
            text-align: center;
            color:white;
            cursor: pointer;
        }
        .container .buttons span.on{
            background-color: red;
        }

接下来，我们把左右切换的箭头加上，然后做简单的修饰，注意：因为这里使用实体来表示左右箭头，所以设置font-size才能改变其大小，

.container .arrow { position: absolute; top: 35%; color: green; padding:0px 14px; border-radius: 50%; font-size: 50px; z-index: 2; display: none; } .container .arrow_left { left: 10px; } .container .arrow_right { right: 10px; } .container:hover .arrow { display: block; } .container .arrow:hover { background-color: rgba(0,0,0,0.2); }