這是我自己做的一個簡單的輪播圖，效果圖如下：

我覺得輪播圖中最主要的是要理解到圖片為什麼會滑動，是怎麼控制的。上面這個我自己做的，是搭好的一個結構，在無序列表中插入需要的圖片。然後在插入圖片的後面新增一個空的無序列表，作為輪播圖中下方的小點。

<div class="box">
            <ul class="imageList">
                <li><img src="img/輪播1.jpg"/></li>
                <li><img src="img/輪播2.jpg"/></li>
                <li><img src="img/輪播3.jpg"/></li>
                <li><img src="img/輪播4.jpg"/></li>
            </ul>
            
            <ul class="num">
                
            </ul>
        </div>
 

然後就是css中書寫樣式了，首先肯定得把無序列表中的li從從上至下排列變為水平方向排列，也就是給li新增一個float屬性；然後有一點需要注意，輪播圖外面的大盒子必須設定為圖片的大小，超出的隱藏，這樣可以剛剛好顯示出一張圖片。然後裝圖片的ul的寬度必須大於或者等於所有圖片總寬度。同樣，這裡也需要運用一個定位的知識，子絕父相。給class為box的盒子設定相對定位，裝圖片的ul設定絕對定位。這裡，儘管輪播圖下面幾個點沒有，但是我們要把樣式先寫好，然後後面通過JavaScript新增。

主要樣式如下：

.box{
    width: 500px;
    height: 300px;
    background-color: lightgrey;
    margin-top: 30%;
    overflow: hidden;
    position: relative;
    
}
.imageList img{
    width: 500px;
    height: 300px;
}
.imageList{
    width: 2500px;
    list-style: none;
    float: left;
    position: absolute;
    
}
.imageList li{
    float: left;
}
 
.box .num{
    position: absolute;
    width: 100%;
    bottom: 10px;
    left: 0;
    text-align: center;
 
}
.box .num li{
    width: 10px;
    height: 10px;
    background-color:white;
    border-radius: 50%;
    display: inline-block;
    margin: 0px 3px;
    cursor: pointer;
}
.box .num li.on{
    background-col
 

更多內容請見原文，文章轉載自：https://blog.csdn.net/weixin_44519496/article/details/118599024