溫馨提示×

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

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

純HTML和CSS如何實(shí)現(xiàn)JD輪播圖效果

發(fā)布時(shí)間：2021-03-19 11:06:50 來(lái)源：億速云 閱讀：268 作者：小新 欄目：web開(kāi)發(fā)

小編給大家分享一下純HTML和CSS如何實(shí)現(xiàn)JD輪播圖效果，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

使用了純HTML和CSS實(shí)現(xiàn)了JD的輪播圖，沒(méi)有加動(dòng)態(tài)效果，主要是使用了定位的知識(shí)。

　　純HTML和CSS如何實(shí)現(xiàn)JD輪播圖效果純HTML和CSS如何實(shí)現(xiàn)JD輪播圖效果　 ，如圖為兩個(gè)側(cè)邊箭頭圖片。

<!DOCTYPE html>
<html lang="en">
<head>    <meta charset="UTF-8">
    <title>LunBo</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        li{
            list-style: none;
        }
        .lunbo{
            margin: 40px auto;
            height: 470px;
            width: 590px;
            position: relative;
        }
        .left,.right{
            position: absolute;
            top: 50%;
            margin-top: -18px;
            width: 24px;
            height: 36px;
        }
        .left{
            left: 0;
        }
        .right{
            right: 0;
        }
        .lunbo ul{
            height: 18px;
            width: 151px;
            background: rgba(255,255,255,.3);
            position: absolute;
            bottom: 10px;
            left: 50%;
            margin-left: -76px;
            border-radius: 10px;
        }
        .lunbo li{
            height: 14px;
            width: 14px;
            border-radius: 50%;
            background-color: #fff;
            float: left;
            margin: 2px;
        }
        .lunbo .current{
            background-color: #f40;
        }
    </style>
</head>
<body>
    <div class="lunbo">
        <img src="images/lunbo.jpg" alt="">
        <div class="left"><img src="images/left.png" alt=""></div>
        <!-- 也可以使用鏈接然后使用backgrounf -->
        <div class="right"><img src="images/right.png" alt=""></div>
        <ul>
            <li class="current"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>
</html>

 實(shí)現(xiàn)了如下效果

純HTML和CSS如何實(shí)現(xiàn)JD輪播圖效果

看完了這篇文章，相信你對(duì)“純HTML和CSS如何實(shí)現(xiàn)JD輪播圖效果”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！

向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)容。

AI
助
手