<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#imgbox{
background: url(img/1.jpg) no-repeat;
background-size: 100% 100%;
margin: 0 auto;
width: 500px;
height: 300px;
position: relative;
}
#top{
position: absolute;
top: 0;
background: rgba(0,0,0,0.5);
text-align: center;
width: 100%;
color: white;
}
#btm{
position: absolute;
bottom: 0;
background: rgba(0,0,0,0.5);
text-align: center;
width: 100%;
color: white;
}
#prev,#next{
position: absolute;
top: 50%;
margin-top: -20px;
display: block;
background: rgba(204,0,153,0.5);
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
vertical-align: middle;
cursor: pointer;
}
#prev{
left: 20px;
}
#next{
right: 20px;
}
</style>
<script>
var imgarr=[‘img/1.jpg‘,‘img/2.jpg‘,‘img/3.jpg‘,‘img/4.jpg‘];
var imgindex=0;
var arrText=[‘文字1‘,‘文字2‘,‘文字3‘,‘文字4‘];
var tid;
var chgimg=function(){
document.getElementById("imgbox").style.backgroundImage="url("+imgarr[imgindex]+")";
document.getElementById("top").innerHTML=(imgindex+1)+"/"+imgarr.length;
document.getElementById("btm").innerHTML=arrText[imgindex];
imgindex=(imgindex+1)%imgarr.length;
tid=setTimeout("chgimg()",2000);
};
function prev(){
clearTimeout(tid);
imgindex-=2;
if(imgindex<0) imgindex=imgarr.length-1;
chgimg();
}
function next(){
clearTimeout(tid);
chgimg();
}
window.onload=function(){
document.getElementById("prev").onclick=prev;
document.getElementById("next").onclick=next;
chgimg();
};
</script>
</head>
<body>
<div id="imgbox">
<div id="top">1/4</div>
<div id="btm">文字1</div>
<div id="prev"><</div>
<div id="next">></div>
</div>
</body>
</html>
原文：https://www.cnblogs.com/21doctor-sun/p/14626049.html