<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>淡入淡出</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<style>
.banner{
width: 100%;
border: 1px solid red;
background: url("img/top_bg.png") no-repeat;
background-size: 100% auto;
position: relative;
height: 80px;
text-align: center;
}
.imgbanner{
margin: auto;
border: 1px solid yellow;
position: relative;
width: 800px;
height: 80px;
overflow: hidden;
}
.imgbanner img{
position: absolute;
left: 0;
top: 0;
width: 100%;
display: none;
}
.imgbanner img:nth-of-type(1){
z-index: 20;
display: block;
}
</style>
</head>
<body>
<div class="banner">
<div class="imgbanner">
<img src="img/01.png" alt="" >
<img src="img/02.png" alt="" >
<img src="img/03.png" alt="" >
<img src="img/04.png" alt="" >
</div>
</div>
<button id="btns">按钮</button>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
$(".imgbanner img").eq(0).siblings().fadeOut("slow")
$(".imgbanner img").eq(0).fadeIn(1200)
let index=0
setInterval(() => {
index++
if(index>4){
index=0
}
console.log(index)
$(".imgbanner img").eq(index).fadeIn(1200)
$(".imgbanner img").eq(index).siblings().fadeOut("slow")
}, 1000);
</script>
</body>
</html>
多张图片的--------淡入淡出---------效果
最新推荐文章于 2021-06-03 10:50:45 发布