<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>走马灯</title>
<style>
.carsouel{
position: relative;
width: 1024px;
height: 60px;
color:white;
overflow: hidden;
}
.inner {
position: absolute;
height: 200%;
width: 100%;
}
.item {
position: absolute;
line-height: 60px;
width:100%;
}
</style>
</head>
<body>
<div class="carsouel">
<div class="inner">
<div class="item" style="top: 0px; background-color: blue;">曾经我也很狂</div>
<div class="item" style="top: 60px; background-color: green;">本人技术最牛</div>
<div class="item" style="top: 120px; background-color: black;">现在也是一样</div>
</div>
</div>
<script>
window.addEventListener('load',function(){
var inner =document.querySelector('.inner');
if (!inner) {
return
}
setInterval(function() {
inner.style.transition = 'all 0.3s ease-in-out';
inner.style.transform = 'translateY(-50%)';
}, 5000);
inner.addEventListener('transitionend',function(){
inner.style.transition='none';
inner.style.transform = 'translateY(0)';
for (let i = 0; i < inner.children.length; i++) {
let item = inner.children[i];
let top = item.style.top;
let topNumber = Number(top.replace('px', ''));
if (topNumber == 0) {
topNumber = (inner.children.length - 1) * 60;
} else {
topNumber -= 60
}
item.style.top = topNumber + 'px';
}
})
})
</script>
</body>
</html>
