需求：出现滚动后的列表轮播显示
<!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>Document</title>
<style>
.content {
width: 200px;
height: 340px;
border: 1px solid #ddd;
overflow: auto;
}
.detail {
width: 100%;
height: 34px;
line-height: 34px;
border-bottom: 1px solid #ddd;
text-align: center;
}
</style>
</head>
<body>
<div class="content">
<div id="content-wrap">
<div class="detail">1</div>
<div class="detail">2</div>
<div class="detail">3</div>
<div class="detail">4</div>
<div class="detail">5</div>
<div class="detail">6</div>
<div class="detail">7</div>
<div class="detail">8</div>
<div class="detail">9</div>
<div class="detail">10</div>
<div class="detail">11</div>
<div class="detail">12</div>
<div class="detail">13</div>
<div class="detail">14</div>
<div class="detail">15</div>
<div class="detail">16</div>
</div>
</div>
<script>
window.onload = function() {
const dom = document.getElementById("content-wrap");
let timer = null;
const animationEndHandler = evt => {
dom.style.cssText = "transform:translate(0,0)";
// appendChild()方法向数组末尾添加元素时，如果该元素已存在数组中，会删除原有位置的元素，然后添加新的元素
dom.appendChild(dom.children[0]);
dom.appendChild(dom.children[0]);
};
const mouseEnterHander = evt => {
clearInterval(timer);
};
const initInterval = () => {
timer = setInterval(() => {
if (dom.children[0]) {
let scrollHeight = dom.children[0].offsetHeight;
scrollHeight = parseInt(scrollHeight);
dom.style.cssText = `transform:translate(0px,-${scrollHeight +
34}px);transition:all 2s ease;`;
}
}, 3000);
};
const mouseLeaveHandler = () => {
initInterval();
};
dom.addEventListener("mouseenter", mouseEnterHander);
dom.addEventListener("mouseleave", mouseLeaveHandler);
// 监听过渡动画结束后触发回调
dom.removeEventListener("transitionend", animationEndHandler);
dom.addEventListener("transitionend", animationEndHandler);
initInterval();
};
</script>
</body>
</html>
网友评论