需求
    1.周期性切换图片
    2.小圈同步切换样式
    3.鼠标移动上去，停止周期性切换
    4.鼠标移开继续周期性切换
    5.快速切换到上一张和下一张功能
    6.点小圈切换到哪张图片

    html

    1. <div class="container">
    2. <img src="img/j1.ico" alt="" id="lunbo_img">
    3. <ul class="indicator">
    4. <li class="current"></li>
    5. <li></li>
    6. <li></li>
    7. <li></li>
    8. </ul>
    9. </div>

    css

            .indicator{
            list-style-type: none;
            position:absolute;
            bottom:10px;
            left:50%;
            padding:0px;
            margin:0px;
            margin-left:-40px;
        }
        .indicator>li{
            border:10px solid blue;
            border-radius:10px;
            float:left;
        }
        .container{
            postion:relative;
            border:1px solid yellow;
            width:128px;
            height:128px;
        }
        .current{
            border-color:red!important;
        }

    jsp

        var index=1;//记录切换到第几张
    var imgs = ["j1.ico","j2.ico","j3.ico","j4.ico"]
window.setInterval(function(){
    index++;
    if(index==5){
        index=1;
    }
    document.getElementById("lunbo_img").src="img/"+imgs[index-1];
    var lis=document.querySelectorAll(".indicator>li")[index-1].className="current";
    if(index!=1) {
        document.querySelectorAll(".indicator>li")[index - 2].className = "";
    }else{
        document.querySelectorAll(".indicator>li")[3].className = "";
    }
},2000)

    到此我们实现了图片切换，但是还需要添加事件互动功能