/* 焦点图模块样式 */
.focus {
    overflow: hidden;
    position: relative;
}
.focus img {
    width: 100%;
}
.focus ul {
    /* ul没有高度，里面的子元素又是浮动的，必然会引起格式混乱
    因此需要清除浮动 */
    overflow: hidden;
    width: 500%;
    /* 显示第一张图片，而不是复制的第三张图片 */
    margin-left: 0;
}
.focus ul li {
    float: left;
    /* 注意：图片的宽度为100%,占满父盒子,而图片的父盒子小li没有宽度，则找ul
       而ul得宽度设为500%,所以图片得宽度也被拉长了
       因此需要给li设置宽度，每个小li占ul的1/5 */
    width: 20%;
}
.focus ol {
    position: absolute;
    bottom: 5px;
    right: 5px;
    margin: 0;
}
.focus ol li {
    /* 使其变成行内块元素，就可以浮动一排显示 */
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 2px;
    background-color: #fff;
    list-style: none;
    transition: all .3s;
}
.focus ol li.current {
    width: 15px;
}