注:图片地址写在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;}