• <button id="eiyoe"><acronym id="eiyoe"></acronym></button>
    <em id="eiyoe"></em>

  • <rp id="eiyoe"><acronym id="eiyoe"><input id="eiyoe"></input></acronym></rp>
      查看: 294|回復: 0
      上一主題 下一主題

      CSS3實現列表無限滾動/輪播效果

      80292

      主題

      0

      好友

      積分

      離線 發信

      跳轉到指定樓層
      樓主
      發表于 2021-07-25 19:58 | 只看該作者 | 倒序瀏覽

      效果預覽

      效果預覽

      思路

      將當前列表滾動至最后一項的末尾,然后瞬間切換回第一項

      問題點

      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 {
              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列表滾動輪播內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關文章,希望大家以后多多支持腳本之家!

      來源:http://www.jb51.net/css/779840.html