在HTML和CSS中，我們可以使用JavaScript的事件監(jiān)聽來使特定元素被點(diǎn)擊時(shí)執(zhí)行相應(yīng)的操作。在這篇文章中，我們將學(xué)習(xí)如何使用CSS和JavaScript來實(shí)現(xiàn)點(diǎn)擊數(shù)字顯示圖片的效果。

//HTML代碼
<div class="image-gallery">
<h3>Image Gallery</h3>
<p>Click the numbers to see the images.</p>
<ul>
<li id="1" class="gallery-item">1</li>
<li id="2" class="gallery-item">2</li>
<li id="3" class="gallery-item">3</li>
</ul>
<img id="image" src="" alt="Gallery Image">
</div>
//CSS代碼
.image-gallery {
width: 50%;
margin: 0 auto;
text-align: center;
}
.gallery-item {
display: inline-block;
margin: 10px;
font-size: 20px;
cursor: pointer;
}
.gallery-item:hover {
color: blue;
}
#image {
max-width: 100%;
margin-top: 20px;
}
//JavaScript代碼
const galleryItems = document.querySelectorAll('.gallery-item');
const galleryImage = document.querySelector('#image');
galleryItems.forEach(item =>{
item.addEventListener('click', () =>{
galleryImage.src = `image-${item.id}.jpg`;
});
});

在這段代碼中，我們首先選中了HTML中的三個(gè)數(shù)字元素，并將它們存儲(chǔ)在一個(gè)名為galleryItems的節(jié)點(diǎn)列表中。接著，我們選中了HTML中的圖片元素，并將其存儲(chǔ)在一個(gè)名為galleryImage的變量中。

使用forEach方法，我們?yōu)槊總€(gè)數(shù)字元素添加了一個(gè)事件監(jiān)聽器，當(dāng)數(shù)字被點(diǎn)擊時(shí)，它會(huì)隨機(jī)展示一個(gè)圖片。

最后，我們可以看到一個(gè)簡(jiǎn)單的圖庫(kù)應(yīng)用程序，它可以讓用戶查看不同的圖片，而不需要刷新頁(yè)面。