溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶(hù)服務(wù)條款》

CSS怎么實(shí)現(xiàn)圖片輪播

發(fā)布時(shí)間：2021-04-02 15:28:03 來(lái)源：億速云 閱讀：218 作者：Leah 欄目：web開(kāi)發(fā)

CSS怎么實(shí)現(xiàn)圖片輪播？很多新手對(duì)此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來(lái)學(xué)習(xí)下，希望你能有所收獲。

在css中，可以使用animation屬性和@keyframes規(guī)則來(lái)實(shí)現(xiàn)圖片輪播效果。只需要先使用@keyframes創(chuàng)建動(dòng)畫(huà)；然后使用animation屬性設(shè)置動(dòng)畫(huà)所需時(shí)間，速度以及次數(shù)等即可。

首先準(zhǔn)備相同大小的多個(gè)圖片，將要展示圖片橫排放在一個(gè)圖片容器里面。在圖片容器外再加一個(gè)展示容器，展示容器大小為圖片大小，給圖片容器添加自定義動(dòng)畫(huà)，在動(dòng)畫(huà)不同階段設(shè)置遞增的偏移值。

動(dòng)畫(huà)效果分為切換和停留兩部分，自定義動(dòng)畫(huà)階段與圖片數(shù)量相關(guān)，動(dòng)畫(huà)各階段偏移值與圖片大小相關(guān)。

本文中示例的是有第一個(gè)圖片切換到最后一張圖片。

HTML

<body>
        <div id="container">
            <div id="photo">
                <img src="images/1.jpg" />
                <img src="images/2.jpg" />
                <img src="images/3.jpg" />
            </div>
        </div>
    </body>

解析：
這里創(chuàng)建了三個(gè) img 元素，img 元素外面是圖片容器，圖片容器外面是展示容器。

CSS

<style type="text/css">
            #container {
                width: 400px;
                overflow: hidden;
            }
            #photo {
                width: 1200px;
                animation: switch 5s ease-out infinite;
            }
            #photo > img {
                float: left;
                width: 400px;
            }
            @keyframes switch {
                0%, 25% {
                    margin-left: 0;
                }
                35%, 60% {
                    margin-left: -400px;
                }
                70%, 100% {
                    margin-left: -800px;
                }
            }
        </style>

效果圖：

CSS怎么實(shí)現(xiàn)圖片輪播

解析：

  • 展示容器大小和圖片大小一致；

  • 圖片添加 float 效果，不用考慮麻煩的 margin 問(wèn)題；

  • 由于示例只有三個(gè)圖片，所以添加了三個(gè)動(dòng)畫(huà)階段，每一階段都是通過(guò)設(shè)置遞增的 margin-left 值達(dá)到切換的效果；

  • 設(shè)置的動(dòng)畫(huà)階段（如：35%~60%）是動(dòng)畫(huà)停留部分，和上一階段空余時(shí)間（如25%~35%）即為動(dòng)畫(huà)切換部分，各部分時(shí)間長(zhǎng)短需要自己把控。

看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注億速云行業(yè)資訊頻道，感謝您對(duì)億速云的支持。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

css
AI
助
手