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

具體實現方法如下：

<style>
.img-list {
display: flex;   /*設置圖片列表為彈性盒子*/
flex-wrap: wrap;   /*設置彈性盒子換行*/
justify-content: center;   /*將彈性盒子中的內容水平居中*/
}
.img-item {
width: 200px;   /*設置圖片項的寬度*/
height: 200px;   /*設置圖片項的高度*/
margin: 10px;   /*設置圖片項的外邊距*/
background-repeat: no-repeat;   /*設置背景不重復*/
background-position: center;   /*設置背景居中*/
background-size: contain;   /*設置圖片填充方式*/
}
</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>

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

接下來，我們需要實現換一批圖片的功能?？梢酝ㄟ^點擊按鈕來實現。

<button id="change-btn">換一批</button>
<script>
let imgList = document.querySelector('.img-list');   /*獲取圖片列表*/
let imgItems = imgList.querySelectorAll('.img-item');   /*獲取圖片項*/
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);   /*生成隨機數*/
imgItems[i].style.backgroundImage = 'url(' + num + '.jpg)';   /*更新圖片*/
}
});
</script>

我們通過 JavaScript 監聽按鈕點擊事件，在每次點擊時生成隨機數，將該隨機數對應的圖片更新到每個圖片項的 CSS 樣式中，從而實現了圖片換一批的功能。