轮播图中 需注意的问题 及底部小圆点写法

注意的问题：

1.包裹图片的ul宽度为轮播图片数量加一的宽度

2.小圆点在底部距中，要让ul的display为inline-block，这样，li会撑开ul，此时再给ul加背景颜色不会是充满一行的。

3.要给ul设置font-size：0；，否则li会在ul中向下偏移

小圆点html结构：

小圆点css样式：

/* 底部圆点 */
.circle{
    position: absolute;
    bottom: 10px;
    width:100%;
    text-align: center;
    height: 14px;
}
.circle .cirbox{
    display: inline-block;
    background:rgba(100, 100, 100, 0.5);
    border-radius: 7px;
    font-size: 0; /*不加这一句，会使li在ul中向下偏移*/
}
.circle .cirbox li{
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    margin: 2px;
}
.circle .cirbox .active{
    background: #ff5000;
}

 

效果图：