<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>在线Web高级</title>
<style>
* {
margin: 0;
padding: 0;
}
.container {
position: relative;
margin: 20px auto;
width: 800px;
height: 300px;
overflow: hidden;
}
.container .wrapper {
position: absolute;
top: 0;
left: 0;
z-index: 10;
display: flex;
justify-content: flex-start;
align-items: center;
width: 4000px;
height: 100%;
/* 动画 */
transition: left .3s linear 0s;
}
.container .wrapper .slide {
width: 800px;
height: 100%;
}
.container .wrapper .slide img {
display: block;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="container">
<div class="wrapper">
<div class="slide">
<img src="images/1.jpg" alt="">
</div>
<div class="slide">
<img src="images/2.webp" alt="">
</div>
<div class="slide">
<img src="images/3.webp" alt="">
</div>
<div class="slide">
<img src="images/4.webp" alt="">
</div>
<!-- 克隆 -->
<div class="slide">
<img src="images/1.jpg" alt="">
</div>
</div>
</div>
<script>
let container = document.querySelector('.container'),
wrapper = container.querySelector('.wrapper'),
step = 0,
timer;
timer = setInterval(function () {
step++;
if (step >= 5) {
// 立即回到第一张
wrapper.style.transition = 'left 0s';
wrapper.style.left = `0px`;
// 运动到第二张
step = 1;
// 刷新渲染队列
wrapper.offsetLeft;
}
wrapper.style.transition = 'left .3s';
wrapper.style.left = `-${step*800}px`;
}, 2000);
</script>
</body>
</html>
轮播图(在新版浏览器渲染队列下利用样式读写分离的应用场景)
最新推荐文章于 2024-06-03 09:20:03 发布