#slider{
    position:relative;
    overflow: hidden;
    width:100%;
    height:100%;
}

#slider ul{
	width:100%;
	text-align: center;
}

#slider li{
    /*宽度，高度，倒角，背景，文字：水平居中，行高，颜色，加粗，右外边距，左浮动*/
    width:14px;
    height:14px;
    border-radius:50%;
    background-color:#3E3E3E;
    text-align:center;
    line-height:14px;
    color:#fff;
    margin-right:10px;
    display: inline-block;
}

#slider li:hover{
    background-color:#e4393c;
    cursor:pointer;
}

#slider > img {   /*轮播广告的图片，绝对定位，zIndex为-1*/
    vertical-align:top;
    position: absolute;
    width:100%;
    height:100%;
    z-index: -1;
    opacity: 0;
    transition: all 1s;
}
#slider > img.active {  /*显示在最上方的广告图片*/
    z-index: auto;
    opacity:1;
    transition: all 1s;
}
#slider ul{
    position:absolute;
    bottom:25px;
}
#slider ul li.active {  /*当前显示出来的序号*/
    background: #e4393c;
}