CSS3實(shí)現(xiàn)列表無限滾動(dòng)/輪播效果

發(fā)布時(shí)間：2021-06-22 16:47:45 作者：一碗單炒飯

本文給大家分享CSS3實(shí)現(xiàn)列表無限滾動(dòng)/輪播效果，實(shí)現(xiàn)思路大概是將當(dāng)前列表滾動(dòng)至最后一項(xiàng)的末尾，然后瞬間切換回第一項(xiàng)，怎么實(shí)現(xiàn)無限輪播效果，下面小編給大家?guī)砹藢?shí)現(xiàn)思路，感興趣的朋友一起看看吧

效果預(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)文章，希望大家以后多多支持腳本之家！