前端轮播图

html（从项目中截的）:

<div class="index-slide-ctt-left">
    <div id="slide1" class="shadow-666">
        <ul>
            <li>
                <a href="article_detail.html" style="overflow: hidden">
                    <img class="slider-img" src="../asset/images/art_img.png" alt="">
                </a>
                <p class="index-article-name">
                    <span class="index-article-name-layer"></span>
                    <a href=" ">
                        数据采集与埋点

                    </a>
                </p>
            </li>
            <li>
                <a href="article_detail.html" style="overflow: hidden">
                    <img class="slider-img" src="../asset/images/slider2.jpg" alt="">
                </a>
                <p class="index-article-name">
                    <span class="index-article-name-layer"></span>
                    <a href=" ">
                        从单一数据库到数据库集群

                    </a>
                </p>
            </li>
            <li>
                <a href="article_detail.html" style="overflow: hidden">
                    <img class="slider-img" src="../asset/images/slider3.jpg" alt="">
                </a>
                <p class="index-article-name">
                    <span class="index-article-name-layer"></span>
                    <a href=" ">
                        3D打印
                    </a>
                </p>
            </li>
        </ul>
    </div>
</div>

css: 

body{
    margin: 0;
    padding: 0;
    background-color: #eff2f5;
}
ul,li{
    margin: 0;
    padding: 0;
}
.index-slide-ctt-left{
    overflow: hidden;
    float: left;
    width: 76%;
    padding-bottom: 10px;
    padding-right: 10px;
}
.index-slides-ctt ol .dot.active{
    background-color: #3a99d8;
}
#slide1{
    position: relative;
    float: left;
    overflow: hidden;
    width: 100%;
    max-width: 670px;
    height: 320px;
}
#slide1 ul{
    overflow: hidden;
}
#slide1 li{
    float: left;
    position: relative;
    display: inline-block;
    height: 320px;
}
#slide1 li img{
    width: 100%;
}
.slider-img{
    opacity:1;
}
.index-article-name,.index-article-name:hover
,.index-article-name:-webkit-any-link{
    position: absolute;
    bottom: 0;
    left:0;
    padding-left: 10px;
    height: 45px;
    width: 100%;
    color: #fff;
    font-size: 14px;
    line-height: 45px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    box-sizing: border-box;
    background: rgba(0, 0, 0, .27);
    z-index: 1;
}
.index-article-name{
    position: absolute;
    bottom: 0;
    left:0;
    height: 45px;
    width: 100%;
    color: #fff;
    font-size: 14px;
    line-height: 45px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    box-sizing: border-box;
    z-index: 1;
}
.index-article-name:hover{
    text-decoration: underline;
}
.index-article-name .index-article-name-layer{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .27);
    z-index: 2;

}
.index-article-name a{
    position: relative;
    padding-left: 10px;
    color: #fff;
    z-index: 3;
}

js: 

var timeout = null; 
var index = 0; 
showImg(0); time();  
function time(){  
timeout = setInterval(function(){  
    ++index;  
    index = $('#slide1 ul li').length-1 < index ? 0 : index;  
    showImg(index);  },1700); 
} 
function showImg(i){  
    $('#slide1 ul li').eq(i).fadeIn(200,function(){  $(this).siblings().fadeOut(200);  }); 
}