点击刷新
怎么用js和css写一个幻灯片
思路如下：
1、创建一个div，用来包裹所有的图片，并设置定位方式为relative；
2、所有的图片设置定位方式为absolute；距离顶部为0；
3、并使用css属性transition给图片加上过渡动画，初始时不透明度为0；
4、使用js的setInterval函数创建定时器，在定时器内先将所有的图片隐藏，再利用下标将需要的图片显示。
（相关课程推荐：JS视频教程）
具体代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.wrap{
width: 460px;
height: 240px;
overflow: hidden;
position: relative;
}
.wrap img{
width: 100%;
height: 100%;
opacity: 0;
position: absolute;
top: 0;
transition: all .5s;
}
.wrap .show{
opacity: 1;
}
</style>
</head>
<body>
<div>
<img src="css3.jpg" alt="">
<img src="css-4.jpg" alt="">
<img src="css-5.jpg" alt="">
<img src="html.jpg" alt="">
<img src="html1.jpg" alt="">
</div>
<script>
const imgs = document.querySelectorAll('.wrap img');
let index = 0;
function changeImg() {
console.log(index)
for (let img of imgs) {
img.className = ''
}
imgs[index].className = 'show';
index = index >= imgs.length - 1 ? 0 : ++index;
}
changeImg();
setInterval(changeImg, 1000)
</script>
</body>
</html>效果图：
© 著作权归作者所有
举报
发表评论
0/200
