对于代码所有重要步骤都写在代码中了,希望对你有用哦!
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>淡入淡出</title>
<style>
*{
margin: 0;
padding:0;
}
body{
background-color: black;
}
.block{
width:600px;
height: 300px;
position: relative;
margin: 0 auto;
border:1px solid silver;
}
ul>li{
list-style: none;
position: absolute;
width:600px;
height: 300px;
opacity: 0;
transition: all 1s linear;
}
ul>li>img{
width:600px;
height: 300px;
}
.banner{
position: absolute;
width:160px;
height: 20px;
left:220px;
bottom: 2px;
z-index: 10;
}
.banner>div{
float: left;
width:15px;
height: 15px;
margin: 3px 4px;
border:1px solid white;
border-radius: 50%;
background-color: black;
transition: all 0.5s linear;
}
</style>
</head>
<body>
<div class="block">
<ul>
<li class="lifo"><img src="./img/demo1.jpg"></li>
<li class="lifo"><img src="./img/demo2.jpg"></li>
<li class="lifo"><img src="./img/demo3.jpg"></li>
<li class="lifo"><img src="./img/demo4.jpg"></li>
<li class="lifo"><img src="./img/demo5.jpg"></li>
<li class="lifo"><img src="./img/demo6.jpg"></li>
</ul>
<div class="banner">
<div class="dian"></div>
<div class="dian"></div>
<div class="dian"></div>
<div class="dian"></div>
<div class="dian"></div>
<div class="dian"></div>
</div>
</div>
<script>
var times;
var dianzindex=0;
var block=document.getElementsByClassName("block")[0];//一定要写[0]
var lifo=document.getElementsByClassName("lifo");
var dian=document.getElementsByClassName("dian");
dian[0].style.backgroundColor="red";
lifo[0].style.opacity=1;
block.onmouseenter=function(){
clearInterval (times);
};
block.onmouseleave=function(){
times=setInterval (function(){
img(1);
},1500);
}
//6.给鼠标添加进入dian的事件 当点变红时,对应当前点的那张图片
for(var i=0;i<dian.length;i++){
dian[i].index=i;//关键 存储每一次点的索引值,如果不存,默认下面的this.index=dian.length-1;
dian[i].onmouseenter=function(){
dian[dianzindex].style.backgroundColor="black";
this.style.backgroundColor="red";
var count=this.index-dianzindex>0?this.index-dianzindex:lifo.length+(this.index-dianzindex)
img(count);
}
}
//1.给图片按照图层排序(5,4,3,2,1,0)
for(var i=0;i<lifo.length;i++){
lifo[i].style.zIndex=lifo.length-i-1;
}
times=setInterval (function(){
img(1);
},1500);
function img(count){
//2.写图层前后改变的顺序
//5,4,3,2,1,0
//0,5,4,3,2,1
for(var k=0;k<count;k++){
for(var i=0;i<lifo.length;i++){
var zindex=lifo[i].style.zIndex;//存储当前索引的值
zindex++;
//3.写淡入淡出的效果
//4.写点 当图片切换时,点变红
if(zindex==5){
lifo[i].style.opacity=1;
dianzindex=i;
dian[i].style.backgroundColor="red";
}
else{
lifo[i].style.opacity=0;
dian[i].style.backgroundColor="black";
}
if(zindex>lifo.length-1){
zindex=0;
}
lifo[i].style.zIndex=zindex;//将改变后的zindex值赋给当前的图片
}
}
}
</script>
</body>
</html>
有什么问题,欢迎随时提问哦!