現代網頁設計中，輪播圖已經成為了一個必不可少的元素。而在許多輪播圖中，大小圖切換是一種非常流行的效果，可以使頁面更加活潑、有趣。因此，我們將介紹如何使用CSS來實現這一效果。
在HTML部分中，我們新建了兩個
元素，分別用于顯示大圖和小圖。其中，大圖的每個圖片使用![]()
元素來展示，小圖同理。
/* CSS部分 */
.big-pic {
width: 80%;
position: relative;
margin: 0 auto;
}
.big-pic img {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 1s ease-in-out;
z-index: 1;
}
.big-pic img:first-child {
opacity: 1;
z-index: 2;
}
.small-pic {
width: 80%;
margin: 0 auto;
display: flex;
justify-content: center;
}
.small-pic img {
width: 25%;
height: auto;
margin-right: 10px;
border: 2px solid #fff;
cursor: pointer;
}
.small-pic img:last-child {
margin-right: 0;
}在CSS部分，我們首先對大圖和小圖的整體布局進行設置。可以看到，我們將大圖的寬度設置為80%，并讓其居中顯示，使用了position:relative屬性。小圖則使用了flex布局使得圖片居中展示。
接下來，我們對大圖的每張圖片進行樣式設置。將其設置為絕對定位，寬度和高度均為100%，并設置opacity屬性為0，使得所有的大圖均不可見。然后，通過將第一張圖片的opacity設置為1，并將z-index屬性設置為2，來顯示第一張圖片。
最后，對于小圖的樣式，我們將所有的元素設置為25%寬度，設置了邊框和指針樣式，通過設置margin-right樣式來設置圖片間距。通過以上設置，大小圖輪播切換效果就完成了。
下一篇css頭部位置居中