<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:0;
padding: 0;
list-style-type: none;
}
ul.img{
margin:0 auto;
margin-top: 100px;
height: 280px;
500px;
overflow: hidden;
}
li.img{
height: 280px;
500px;
}
ul.buttom{
position: relative;
margin:0 auto;
bottom:35px;
height: 24px;
260px;
border-radius: 24px;
background-color: rgba(255,255,255,0.5);
}
.buttom li{
float: left;
margin-left: 10px;
height: 20px;
20px;
border-radius:20px;
border:2px solid rgb(255,255,255);
}
.buttom li:nth-of-type(1){
margin-left: 30px;
}
div{
height: 55px;
40px;
margin:0 auto;
position: relative;
}
div.left{
bottom: 190px;
right: 220px;
}
div.right{
bottom: 245px;
left: 220px;
}
</style>
</head>
<body>
<ul class="img">
<li><img src="./img1.jpg" alt=""></li>
<li><img src="./img2.jpg" alt=""></li>
<li><img src="./img3.jpg" alt=""></li>
<li><img src="./img4.jpg" alt=""></li>
<li><img src="./img5.jpg" alt=""></li>
<li><img src="./img6.jpg" alt=""></li>
</ul>
<ul class="buttom">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="left"></div>
<div class="right"></div>
<script>
var button_li_arr=document.querySelectorAll('.buttom li');
var img_li_arr=document.querySelectorAll('.img li');
var index=0;
document.querySelector('.img').onmousemove=function(){
document.querySelector('.left').style.background='url(./index.png) 0 0 no-repeat';
document.querySelector('.right').style.background='url(./index.png) -42px 0 no-repeat';
};
document.querySelector('.buttom').onmousemove=function(){
document.querySelector('.left').style.background='url(./index.png) 0 0 no-repeat';
document.querySelector('.right').style.background='url(./index.png) -42px 0 no-repeat';
};
document.querySelector('.left').onmousemove=function(){
document.querySelector('.left').style.background='url(./index.png) -86px 0 no-repeat';
document.querySelector('.right').style.background='url(./index.png) -42px 0 no-repeat';
};
document.querySelector('.right').onmousemove=function(){
document.querySelector('.right').style.background='url(./index.png) -128px 0 no-repeat';
document.querySelector('.left').style.background='url(./index.png) 0 0 no-repeat';
};
document.querySelector('.img').onmouseout=function(){
document.querySelector('.left').style.background='';
document.querySelector('.right').style.background='';
};
for(var i = 0;i < img_li_arr.length;i ++){
button_li_arr[i].butt=i;
button_li_arr[i].onmouseover=function(){
clearInterval(sid);
for(var j = 0;j < img_li_arr.length;j ++){
img_li_arr[j].style.display='none';
button_li_arr[j].style.backgroundColor='';
};
img_li_arr[this.butt].style.display='block';
button_li_arr[this.butt].style.backgroundColor='rgb(255,255,255)';
index=this.butt;
};
button_li_arr[i].onmouseout=function(){
sid=setInterval(move,3000);
};
};
document.querySelector('.left').onclick=function(){
clearInterval(sid);
move();move();move();move();move();
sid=setInterval(move,3000);
};
document.querySelector('.right').onclick=function(){
clearInterval(sid)
move();
sid=setInterval(move,3000);
};
function move(){
index++
if(index==img_li_arr.length){index=0;};
for(var i = 0;i < img_li_arr.length; i ++){
img_li_arr[i].style.display='none';
button_li_arr[i].style.backgroundColor='';
};
img_li_arr[index].style.display='block';
button_li_arr[index].style.backgroundColor='rgb(255,255,255)';
};
button_li_arr[index].style.backgroundColor='rgb(255,255,255)';
var sid=setInterval(move,3000);
</script>
</body>
</html>