代码及效果
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
*{
list-style: none;
margin: 0;
padding: 0;
}
body{
background-color: rgb(119,115,110);
}
ul{
width: 800px;
height: 200px;
position: absolute;
left: 0;
bottom: 0;
top: 0;
right: 0;
margin: auto;
}
li{
width: 400px;
height: 200px;
float: left;
position: absolute;
transition: .4s;
}
div{
width: 50px;
height: 5px;
border: 1px solid rgba(156, 156, 156, 156);
background-color: white;
position: absolute;
bottom: -80px;
z-index: 100;
}
</style>
<script>
window.onload=function(){
var timer=setInterval(GoNext,2000);
var ul=document.querySelector("ul");
ul.addEventListener("mouseenter",(e)=>{
clearInterval(timer);
})
ul.addEventListener("mouseleave",(e)=>{
clearInterval(timer);
timer=setInterval(GoNext,2000)
})
var divs=new Array();
var lis=new Array();
for(var i=1;i<=5;i++){
var li=document.createElement("li");
var image=document.createElement("img");
image.src="./image/"+i+".jpg";
image.style.width="400px";
image.style.height="200px";
if(i!=5){
li.id=5-i;
}
else{
li.id=5;
}
ul.appendChild(li);
li.appendChild(image);
lis.push(li);
var bottom_div=document.createElement("div");
bottom_div.style.left=125*i+"px";
bottom_div.name=i;
bottom_div.style.cursor="pointer";
divs.push(bottom_div);
ul.appendChild(bottom_div);
}
var pre_img=document.createElement("img");
pre_img.src="./image/preimg.png";
pre_img.style.position="absolute";
pre_img.style.zIndex=100;
pre_img.style.left=0;
pre_img.style.top=0;
pre_img.style.bottom=0;
pre_img.style.margin="auto";
ul.appendChild(pre_img);
pre_img.addEventListener("click",(e)=>{
clearInterval(timer);
GoPre();
timer=setInterval(GoNext,2000);
})
pre_img.style.cursor="pointer";
var nex_img=document.createElement("img");
nex_img.src="./image/neximg.png";
nex_img.style.position="absolute";
nex_img.style.zIndex=100;
nex_img.style.right=0;
nex_img.style.top=0;
nex_img.style.bottom=0;
nex_img.style.margin="auto";
ul.appendChild(nex_img);
nex_img.addEventListener("click",(e)=>{
clearInterval(timer);
GoNext();
timer=setInterval(GoNext,2000);
})
nex_img.style.cursor="pointer";
divs[0].style.backgroundColor="aqua";
var len=lis.length-1;
lis[len-2].style.left="0px";
lis[len-1].style.left="200px";
lis[len-1].style.zIndex=100;
lis[len-1].style.transform="scale(1.3)"
lis[len].style.left="400px"
for(var i=0;i<len+1;i++){
divs[i].onclick=function(){
clearInterval(timer);
if(this.name<lis[len-1].id){
while(this.name!=lis[len-1].id){
GoNext();
}
}
else{
while(this.name!=lis[len-1].id){
GoPre();
}
}
}
timer=setInterval(GoNext,2000);
}
function GoPre(){
var lihead=lis.shift();
lis.push(lihead);
for(var i=0;i<len+1;i++){
lis[i].style.left="0px";
lis[i].style.zIndex=i;
lis[i].style.transform="none";
}
lis[len-2].style.left="0px";
lis[len-1].style.left="200px";
lis[len-1].style.zIndex=100;
lis[len-1].style.transform="scale(1.3)"
lis[len].style.left="400px"
DivColorChange()
}
function GoNext(){
var listail=lis.pop();
lis.unshift(listail);
for(var i=0;i<len+1;i++){
lis[i].style.left="0px";
lis[i].style.zIndex=i;
lis[i].style.transform="none";
}
lis[len-2].style.left="0px";
lis[len-1].style.left="200px";
lis[len-1].style.zIndex=100;
lis[len-1].style.transform="scale(1.3)"
lis[len].style.left="400px"
DivColorChange()
}
function DivColorChange(){
for(var i=0;i<len+1;i++){
if(lis[len-1].id==divs[i].name){
divs[i].style.backgroundColor="aqua";
}
else{
divs[i].style.backgroundColor="white";
}
}
}
}
</script>
</head>
<body>
<ul></ul>
</body>
</html>
效果:
自己运行查看
注意
- 数字与字符串拼接后为字符串
- 上述代码中数组中末尾的三个下标对应的图片在不断变化,但是图片id没变
- 这个案例中未采用事件监听中的箭头函数因为指向window(点击这里查看详情)