<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.outer{
width: 400px;
height:300px;
background-image: url(img/1.jpg);
margin: 50px auto;
position: relative;
}
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.outer{
width: 400px;
height:300px;
background-image: url(img/1.jpg);
margin: 50px auto;
position: relative;
}
.left,.right{
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 80px;
background-color: rgba(0,0,0,0.2);
line-height: 80px;
color: white;
font-weight: 1200;
text-align: center;
}
.left{
left: 0px;
}
.right{
right: 0px;
}
ul{
list-style: none;
position: absolute;
left: 50%;
top: 80%;
transform: translate(-50%,-50%);
}
li{
display: inline-block;
margin-right: 5px;
border: 5px solid white;
border-radius: 5px;
}
.active{
border-color: deepskyblue;
}
</style>
<script type="text/javascript">
window.onload=function(){
var arrColor=["url(img/1.jpg)","url(img/2.jpg)","url(img/3.jpg)","url(img/4.jpg)","url(img/5.jpg)",'url(img/6.jpg)'];
var arrLi=document.getElementsByTagName("li");
var bg=document.getElementsByClassName("outer")[0];
var Lbtn=document.getElementsByClassName("left")[0];
var Rbtn=document.getElementsByClassName("right")[0];
for(let i=0;i<arrLi.length;i++){
arrLi[i].index=i;
arrLi[i].onmouseover=function(){
for(var k=0;k<arrLi.length;k++){
arrLi[k].className='';
}
arrLi[this.index].className='active';
bg.style.backgroundImage=arrColor[this.index];
clearInterval(gogo);
}
arrLi[i].onmouseout=function(){
gogo=setInterval(Rbtn.onclick,1000);
}
}
Lbtn.onclick=function(){
if(arrLi[0].className=='active'){
arrLi[0].className='';
arrLi[arrLi.length-1].className='active';
bg.style.backgroundImage=arrColor[arrColor.length-1];
}
else{
for(var j=1;j<arrLi.length;j++){
if(arrLi[j].className=='active'){
arrLi[j].className='';
arrLi[j-1].className='active';
bg.style.backgroundImage=arrColor[j-1];
}
}
}
}
Lbtn.onmouseover=function(){
clearInterval(gogo);
this.style.cursor="pointer";
}
Lbtn.onmouseout=function(){
gogo=setInterval(Rbtn.onclick,1000);
}
Rbtn.onclick=function(){
if(arrLi[arrLi.length-1].className=='active'){
arrLi[arrLi.length-1].className='';
arrLi[0].className='active';
bg.style.backgroundImage=arrColor[0];
}
else{
for(var j=0;j<arrLi.length-1;j++){
if(arrLi[j].className=='active'){
arrLi[j].className='';
j=j+1;
arrLi[j ].className='active';
bg.style.backgroundImage=arrColor[j];
}
}
}
}
Rbtn.onmouseover=function(){
clearInterval(gogo);
this.style.cursor="pointer";
}
Rbtn.onmouseout=function(){
gogo=setInterval(Rbtn.onclick,1000);
}
var gogo=setInterval(Rbtn.onclick,1000);
}
</script>
</head>
<body>
<div class="outer">
<div class="left"><</div>
<div class="right">></div>
<ul>
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>