CSS3实现列表⽆限滚动轮播效果
效果预览
思路
将当前列表滚动⾄最后⼀项的末尾，然后瞬间切换回第⼀项
问题点
1.⽤什么⽅式实现⽆限轮播
这个问题就是列表滚动到最后时底部会留⽩(有多余空间)如何处理？
在列表的最后添加列表开头的重复项即可(如图中的10后⾯出现的1,2,3,4,5既为重复项)。
重复项添加的数⽬要根据当前列表的⾼度和列表项的⾼度⼀起确定，例如：
列表⾼度150px，列表项⾼度30px，则需要在当前列表尾部添加150 / 30 = 5项重复项才可以去除留⽩。
2.如何让⽤户⽆感知的切换回第⼀项
添加好重复项之后控制好切换时机，当列表滚动到最后⼀项的末尾(重复项第⼀项的开头)时，⽴即进⾏切换。例如：列表项共10项，则让列表向上移动到10 * 30px = 300px时⽴即进⾏切换即可实现⽆感知切换
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表⽆限滚动</title>
</head>
<style>
.container {
position: relative;
background-color: #a4ffcc;
/* ⽗容器需要有明确的⾼度 */
height: 150px;
width: 200px;
margin: auto;
overflow: hidden;
}
.container > .scroll-list {
position: absolute;
top: 0;
left: 0;
width: 100%;
animation: scroll 6s linear infinite normal;
}
.container > .scroll-list > div {
html滚动效果代码
width: 100%;
/* 滚动的项⽬需要有具体的⾼度 */
height: 30px;
background-color: #1ea7ff;
display: flex;
justify-content: center;
align-items: center;
color: white;
}
.container > .scroll-list > div:nth-child(2n) {
background-color: #18d9f8;
}
@keyframes scroll {
100% {
/* 需要滚动内容的总⾼度 */
top: -300px;
}
}
</style>
<body>
<div class="container">
<div class="scroll-list">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<!-- 下⾯代码是为了让滚动内容能够多展⽰⼀屏(去除留⽩/⽆限轮播)：数量请⾃⾏根据⾼度进⾏计算 -->
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</div>
</body>
</html>
到此这篇关于CSS3实现列表⽆限滚动/轮播的⽂章就介绍到这了，更多相关css3列表滚动轮播内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章，希望⼤家以后多多⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。