lunbo.html
<!DOCTYPE html><html lang="en">
<head>
<meta charset="gb2312">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="picshow.css" > <!--href中写css样式表存放的路径-->
</link>
</head>
<body background="bg.jpg">
<audio src="tothemoon.mp3" id="myaudio" autoplay="autoplay" controls="controls" loop="true" muted="muted">
</audio>
<div class="box">
<ul class="banner">
<li class="active"><a href="#"><img src="5.jpg" alt=""> </a></li>
<li><a href="#"><imag src="7.jpg" alt=""></a></li>
<li><a href="#"><imag src="3.jpg" alt=""></a></li>
<li><a href="#"><imag src="4.jpg" alt=""></a></li>
<li><a href="#"><imag src="5.jpg" alt=""></a></li>
</ul>
<ul class="btnbox">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="prev"><</div>
<div class="next">></div>
</div>
<script>
var imgs=document.querySelectorAll(".banner li");
console.log(imgs);
var btns=document.querySelectorAll(".btnbox li");
var box=document.querySelector(".box");
var nowbtn=btns[0];
var nowimg=imgs[0];
var st;
Array.from(btns).forEach(function (btn,index)
{
btn.onmouseover=function()
{
clearTimeout(st);
st=setTimeout(function()
{
num=index;
nowbtn.classList.remove("active");
this.classList.add("active");
nowbtn=this;
nowimg.classList.remove("active");
imgs[index].classList.add("active");
nowimg=imgs[index];
}.bind(this),300);
}
});
var num=0;
var t=setInterval(move,3000);
function move()
{
num++;
if(num==imgs.length)
{
num=0;
}
if(num==-1)
{
num=imgs.length-1;
}
nowbtn.classList.remove("active");
btns[num].classList.add("active");
nowbtn=btns[num];
nowimg.classList.remove("active");
imgs[num].classList.add("active");
nowimg=imgs[num];
}
box.onmouseover=function()
{
clearInterval(t);
};
box.onmouseout=function()
{
t=setInterval(move,3000)
};
var prev=document.querySelector(".prev");
var next=document.querySelector(".next");
var flag=true;
next.onclick=function()
{
if(flag)
{
flag=false;
move();
}
};
prev.onclick=function()
{
if(flag)
{
flag=false;
num-=2;
move();
}
};
Array.from(imgs).forEach(function(img)
{
img.addEventListener("transitionend",function()
{
flag=true;
})
});
</script>
</body>
</html>
picshow.css
body, ul{
margin:0;
padding:0;
list-style:none;
}
.myaudio{
display:none
}
.box{
width:800px;
height:400px;
margin:auto;
position:relative;
}
.banner{
width:800px;
height:400px;
position:relative;
}
.banner li {
width:800px;
height:400px;
position:absolute;
left:0;
top:0;
opacity:0;
z-index:1;
transition:all 1s;
}
.banner li.active{
width:800px;
height:400px;
position:relative;
background-image:url(3.jpg);
opacity:1;
z-index:2;
}
.banner a{
display:block;
width:800px;
height:400px;
}
.banner img{
width:800px;
height:400px;
}
.btnbox{
width:150px;
height:20px;
position:absolute;
left=50%;
margin-left:-75px;
bottom:50px;
z-index:999;
}
.btnbox li{
width:20px;
height:20px;
background:#fff;
border-radius:50%;
float:left;
margin:0 5px;
cursor:pointer;
}
.btnbox li.active{
background:red;
}
.prev, .next{
width:50px;
height:100px;
background:rgba(0,0,0,0.5);
color:#fff;
font-size:20px;
text-align:center;
line-height:100px;
cursor:pointer;
position:absolute;
top:50%;
margin-top:-50px;
z-index:999;
}
.prev{
left:0;
}
.next{
right:0;
}