CSS3實(shí)現(xiàn)列表無限滾動(dòng)/輪播效果
我要評論效果預(yù)覽
思路
將當(dāng)前列表滾動(dòng)至最后一項(xiàng)的末尾，然后瞬間切換回第一項(xiàng)
問題點(diǎn)
1.用什么方式實(shí)現(xiàn)無限輪播
這個(gè)問題就是列表滾動(dòng)到最后時(shí)底部會留白(有多余空間)如何處理？
在列表的最后添加列表開頭的重復(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ù)量請自行根據(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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
jQuery css3實(shí)現(xiàn)響應(yīng)式圖文卡片滾動(dòng)輪播特效
這是一款jquery和css3響應(yīng)式卡片圖文列表輪播布局?；趏wl-carousel圖片滾動(dòng)插件，通過bootstrap制作響應(yīng)式卡片布局，組成炫酷的圖文卡片輪播特效。感興趣的朋友前來下載2019-05-15- 這篇文章主要介紹了CSS3簡易切割輪播圖的實(shí)現(xiàn)代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)2020-12-09
- 輪播圖，網(wǎng)頁上經(jīng)常能看得見，畫面比較精美，下面是純CSS3的輪播圖的一種，感興趣的朋友一起看看吧2019-11-11
利用 CSS3 實(shí)現(xiàn)的無縫輪播功能代碼
本文通過實(shí)例代碼給大家介紹了基于css3實(shí)現(xiàn)的無縫輪播效果，代碼簡單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2017-09-25
