效果預覽
思路
將當前列表滾動至最后一項的末尾，然后瞬間切換回第一項
問題點
1.用什么方式實現(xiàn)無限輪播
這個問題就是列表滾動到最后時底部會留白(有多余空間)如何處理？
在列表的最后添加列表開頭的重復項即可(如圖中的10后面出現(xiàn)的1,2,3,4,5既為重復項)。
重復項添加的數(shù)目要根據(jù)當前列表的高度和列表項的高度一起確定，例如：
列表高度150px，列表項高度30px，則需要在當前列表尾部添加150 / 30 = 5項重復項才可以去除留白。
2.如何讓用戶無感知的切換回第一項
添加好重復項之后控制好切換時機，當列表滾動到最后一項的末尾(重復項第一項的開頭)時，立即進行切換。例如：
列表項共10項，則讓列表向上移動到10 * 30px = 300px時立即進行切換即可實現(xiàn)無感知切換
代碼
<!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 {
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% {
/* 需要滾動內(nèi)容的總高度 */
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>
<!-- 下面代碼是為了讓滾動內(nèi)容能夠多展示一屏(去除留白/無限輪播)：數(shù)量請自行根據(jù)高度進行計算 -->
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</div>
</body>
</html>
到此這篇關(guān)于CSS3實現(xiàn)列表無限滾動/輪播的文章就介紹到這了,更多相關(guān)css3列表滾動輪播內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
