干蹦轮播图的布局摘要

首先先确定图片的数量,用一个大盒子包裹所有的元素.

我们使用 ul li 来包裹图片

<div class="carousel">
        <ul class="pic">
            <li class="current"><a href="javascript:;"><img src="images/lunbo/img1.jpg" /></a></li>
            <li><a href="javascript:;"><img src="images/lunbo/img2.jpg" /></a></li>
            <li><a href="javascript:;"><img src="images/lunbo/img3.jpg" /></a></li>
            <li><a href="javascript:;"><img src="images/lunbo/img4.jpg" /></a></li>
            <li><a href="javascript:;"><img src="images/lunbo/img5.jpg" /></a></li>
            <li><a href="javascript:;"><img src="images/lunbo/img6.jpg" /></a></li>
        </ul>

我们给大盒子设置宽,高等基本属性

.carousel{
          position: relative;
          width: 800px;
          height: 450px;
          border: 10px solid #ccc;
          margin: 50px auto;
      }

让所有的图都重叠在一起,然后都隐藏起来

.carousel .pic li{
          position: absolute;
          top: 0;
          left: 0;
          width: 800px;
          height: 450px;
          display: none;
      }

然后我们让li中的第一张图显示出来(单独的为它添加类名)

.carousel .pic li.current{
          display: block;
      }

当 li包裹着图片的时候,之间会有一个间距,我们要将图片进行砖块

.carousel .pic li img{
          display: block;

给按钮设置共同的属性

.carousel .btn a{
          position: absolute;
          top: 50%;
          width: 40px;
          height: 80px;
          margin-top: -40px;
          background-color: rgba(255,255,255,0.2);
          font: bold 40px/80px "SimSun";
          color: #fff;
          text-decoration: none;
          text-align: center;
      }

然后分别给左右按钮进行定位,添加伪类样式

.carousel .btn .leftbtn{
          left: 0;
      }
.carousel .btn .rightbtn{
          right: 0;
      }
.carousel .btn a:hover{
          background-color: rgba(255,255,255,0.5);
      }

然后紧接着后面用一个盒子包裹着左右的按钮

<div class="btn">
            <a href="javascript:;" class="leftbtn">&lt;</a>
            <a href="javascript:;" class="rightbtn">&gt;</a>
        </div>

用ol 和 li 来包裹图片下方的导航

        <ol class="sub">
            <li class="current"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ol>
    </div>

给下方的ol设置整体样式

.carousel .sub{
          position: absolute;
          bottom: 30px;
          left: 50%;
          width: 240px;
          height: 20px;
          padding: 5px 0 5px 20px;
          border-radius: 15px;
          margin-left: -130px;
          background-color: rgba(255,255,255,0.3);
      }

给每个li设置大小

.carousel .sub li{
          float: left;
          width: 20px;
          height: 20px;
          margin-right: 20px;
          border-radius: 50%;
          background-color: #fff;
      }

给每个被选中的li 设置样式

.carousel .sub li.current{
          background-color: #0ff;
}