图片切换实例

注:图片地址写在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';}
        fn();
        autoPlay();
        //初始化
        function fn(){
            oImg.src=arrUrl[num];
            for(var i=0;i

 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;}