1.首先是效果图，要在网页中实现下图的轮播效果，有四张图片，每张图片有自己的标题，然后还有右下角的小方框，鼠标悬浮在小方框上，会切换到对应的图片中去。

2.先是HTML中的内容，最外层是轮播图整个的容器“slideShowContainer”，里边是用来装图片的“picUl”和用来显示小方框的“dotUl”，以及用来装标题的“titleDiv”。

    

        

        

        

        

    

    

        
1

        
2

        
3

        
4

    

    

        党政机关公务用车有了统一标识
        “洛阳创新”亮相第52届巴黎航展
        中国河洛乡愁摄影主题公园揭牌
        洛阳机场建成生态停车场
    



3.然后是css中的样式

#slideShowContainer{    width: 425px;    height: 325px;    margin-top: 10px;    margin-left: 10px;    overflow: hidden;    position: relative;}#slideShowContainer img{    width: 425px;    height: 325px;    transition: all 0.6s;}#slideShowContainer img:hover{    transform: scale(1.07);}#picUl{    list-style: none;}#dotUl{　　　　    list-style: none;    display: flex;    flex-direction: row;    position: absolute;　　//使用绝对布局，固定于左下角    right: 21px;    bottom: 15px;    z-index: 2;　　//通过设置z-index的值大于#titleDiv中z-index的值，使其浮在标题栏的上方}#titleDiv{    position: absolute;    width: 100%;    height: 42px;    bottom: 0px;    left: 0px;    background-color: #000000;    opacity:0.6;　　//设置透明度，实现标题栏半透明效果    z-index: 1;}#titleDiv>span{    line-height: 42px;    color: #FFFFFF;    margin-left: 20px;    width: 270px;    overflow: hidden;    text-overflow: ellipsis;    white-space: nowrap;}#titleDiv>span>a{    color: #FFFFFF;}.selected{    width: 12px;    height: 12px;    background-color: #FFFFFF;    color: transparent;    margin-left: 9px;}.unselected{    width: 12px;    height: 12px;    background-color: #0069AD;    color: transparent;    margin-left: 9px;}

.hide{    display: none;}.show{    display: block;}

4.通过js控制，动态修改相应的样式，达到图片轮播的效果

/*图片轮播*/var slideShowContainer = document.getElementById("slideShowContainer");var pic = document.getElementById("picUl").getElementsByTagName("li");var dot = document.getElementById("dotUl").getElementsByTagName("li");var title = document.getElementById("titleDiv").getElementsByTagName("span");var index = 0;var timer = null;/*定义图片切换函数*/function changePic (curIndex) {    for(var i = 0;i = pic.length){        index = 0;    }    changePic(index);    index++;}/*定义并调用自动播放函数*/timer = setInterval(autoPlay,1500);/*鼠标划过整个容器时停止自动播放*/slideShowContainer.onmouseover = function(){    clearInterval(timer);}/*鼠标离开整个容器时继续播放下一张*/slideShowContainer.onmouseout = function(){    timer = setInterval(autoPlay,1500);}/*遍历所有数字导航实现划过切换至对应的图片*/for(var i = 0;i