在網(wǎng)頁中，我們經(jīng)常需要展示一些圖片。為了使網(wǎng)頁更加生動、豐富，我們還可能需要不斷更換這些圖片。在這種情況下，使用 CSS 來實(shí)現(xiàn)圖片換一批的功能就是一種很好的方式。

具體實(shí)現(xiàn)方法如下：

<style>
.img-list {
display: flex;   /*設(shè)置圖片列表為彈性盒子*/
flex-wrap: wrap;   /*設(shè)置彈性盒子換行*/
justify-content: center;   /*將彈性盒子中的內(nèi)容水平居中*/
}
.img-item {
width: 200px;   /*設(shè)置圖片項(xiàng)的寬度*/
height: 200px;   /*設(shè)置圖片項(xiàng)的高度*/
margin: 10px;   /*設(shè)置圖片項(xiàng)的外邊距*/
background-repeat: no-repeat;   /*設(shè)置背景不重復(fù)*/
background-position: center;   /*設(shè)置背景居中*/
background-size: contain;   /*設(shè)置圖片填充方式*/
}
</style>
<div class="img-list">
<div class="img-item" style="background-image: url(1.jpg)"></div>
<div class="img-item" style="background-image: url(2.jpg)"></div>
<div class="img-item" style="background-image: url(3.jpg)"></div>
<div class="img-item" style="background-image: url(4.jpg)"></div>
<div class="img-item" style="background-image: url(5.jpg)"></div>
<div class="img-item" style="background-image: url(6.jpg)"></div>
</div>

上述代碼中，我們通過設(shè)置圖片列表為彈性盒子，并使用 flex-wrap 屬性實(shí)現(xiàn)了換行的功能。然后，我們將背景圖片設(shè)置在每個(gè)圖片項(xiàng)的 CSS 樣式中，使用 background-repeat 屬性將圖片不重復(fù)，使用 background-position 和 background-size 屬性來實(shí)現(xiàn)圖片的填充方式和居中效果。

接下來，我們需要實(shí)現(xiàn)換一批圖片的功能。可以通過點(diǎn)擊按鈕來實(shí)現(xiàn)。

<button id="change-btn">換一批</button>
<script>
let imgList = document.querySelector('.img-list');   /*獲取圖片列表*/
let imgItems = imgList.querySelectorAll('.img-item');   /*獲取圖片項(xiàng)*/
let changeBtn = document.getElementById('change-btn');   /*獲取按鈕*/
changeBtn.addEventListener('click', function() {
for (let i = 0; i< imgItems.length; i++) {
let num = Math.ceil(Math.random() * 6);   /*生成隨機(jī)數(shù)*/
imgItems[i].style.backgroundImage = 'url(' + num + '.jpg)';   /*更新圖片*/
}
});
</script>

我們通過 JavaScript 監(jiān)聽按鈕點(diǎn)擊事件，在每次點(diǎn)擊時(shí)生成隨機(jī)數(shù)，將該隨機(jī)數(shù)對應(yīng)的圖片更新到每個(gè)圖片項(xiàng)的 CSS 樣式中，從而實(shí)現(xiàn)了圖片換一批的功能。