html5+css+JavaScript 轮播图

div id="slideShowContainer">
    ul id="imgUl">
        li> div class="SlidePic"> a href="#">img src="img/g_1.jpeg" alt="" />a> div> li>
        li> div class="SlidePic"> a href="#">img src="img/g_2.jpeg" alt=""/>a> div> li>
        li> div class="SlidePic"> a href="#">img src="img/g_3.jpeg" alt="" />a> div> li>
    ul>
    ul id="bUl">
        li class="selected">1li>
        li class="unselecte">2li>
        li class="unselecte">3li>
    ul>
    div id="titleDiv">
        span class="show">a href=‘#‘>图片介绍a>span>
        span class="hide">a href=‘#‘>图片介绍a>span>
        span class="hide">a href="#">图片介绍a>span>
    div>
div>      

.slideDiv{
    height: 410px;
    text-align: center;
    overflow:hidden;
    opacity: 0.6;
}
#slideShowContainer｛
    overflow: hidden;
    position: relative;/*用于小方框的定位*/        
｝

.SlidePic{
    position: relative;
    transition: all 0.6s;
}


#slideShowContainer img{
    z-index: -1;
    transition: all 0.6s;                
}


#slideShowContainer img:hover{
    transform: scale(1.07);
}
#imgUl{
    list-style: none;
}
#bUl{
    list-style: none;
    display: flex;
    flex-direction: row;
    /*将小方框固定在右下角*/
    position: absolute;
    right: 25%;
    bottom: 1%;
    /*通过设置z-index的值大于#titleDiv中z-index的值，
     * 使其浮在标题栏的上方*/
    z-index: 2;
}
#titleDiv{
    position: absolute;
    width: 100%;
    /*height: 80;*/
    bottom: 1%;
    /*left: 20%;*/
    background-color: black;
    /*设置透明度，实现标题栏半透明效果*/
    opacity: 0.6;
    z-index: 1;
}
#titleDiv>span{
    position: relative;
    left: 20%;
    line-height: 42px;
    color: #FFFFFF;
    margin-left: 20px;
    width: 270px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#titleDiv>span>a{
    color: #FFFFFF;
    /*text-decoration-style: none;*/
}
.selected{
    /*font-size: 15px;*/
    width: 12px;
    height: 12px;
    background-color: #FFFFFF;
    color:black;
    margin-left: 9px;
}
.hide{
    display: none;
}
.show{
    display: block;
}