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