图片切换实例

注:图片地址写在js数组中的写法

 window.onload=function(){ 
        var oDiv=document.getElementById("wrap");
        var oImg=oDiv.getElementsByTagName("img")[0];
        var tBox=oDiv.getElementsByTagName("ul")[0];
        var tabs=tBox.getElementsByTagName("li");
        var arrUrl=['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg','img/5.jpg'];
        var num=0;
        var timer=null;
        for(var i=0;i<arrUrl.length;i++){tBox.innerHTML+='<li></li>';}
        fn();
        autoPlay();
        //初始化
        function fn(){
            oImg.src=arrUrl[num];
            for(var i=0;i<tabs.length;i++){tabs[i].className="";}
            tabs[num].className="active";
        }

        //定时切换
        function autoPlay(){
            timer=setInterval(function(){
                num++;
                num%=arrUrl.length;
                fn();
            },1000);
        }
        oDiv.onmouseover=function(){clearInterval(timer)}
        oDiv.onmouseout=autoPlay;
        //设置焦点点击效果
        for(var a=0;a<tabs.length;a++){
            tabs[a].index=a;
            tabs[a].onclick=function(){
                num=this.index;
                fn();
            }
        }
         prev.onclick=function(){
            num--; if(num<0){num=arrUrl.length-1}
            fn();
        }
        next.onclick=function(){
            num++;
            if(num==arrUrl.length){num=0;}
            fn();
        }

    }

 <div class="wrap" id="wrap">
        <img src="" alt=""/>
        <ul></ul>
    </div>

 body{background:#F5F5F5}
        *{margin:0;padding:0;}
        ul li{list-style: none;}
        .wrap{position:relative;margin:20px auto;background:#fff;overflow:hidden;}
        .wrap img{width:375px;}
        .wrap ul{position:absolute;bottom:5px;display:flex;width:100%;justify-content: center;display:-webkit-flex;}
        .wrap ul li{width:16px;height:16px;background:#fff;opacity:0.6;float:left;border-radius:50%;margin:0 3px;cursor: pointer;}
        .wrap .active{background:#00a3af;opacity: 1;}
        .wrap p{position:absolute;width:90px;height:30px;left:5px;top:10px;}