隨著網頁設計的不斷發展，越來越多的圖片被應用到網站中，為了讓網站更加生動有趣，我們會需要在網站中添加圖片的點擊效果來實現頁面元素的交互，本文將介紹如何通過CSS實現簡單的圖片點擊切換效果。
<html>
<head>
<style>
.img-container {
position: relative;
width: 300px;
}
.img-container img {
position: absolute;
transition: opacity 0.5s ease-in-out;
opacity: 0;
width: 100%;
height: auto;
}
.img-container img.active {
opacity: 1;
}
</style>
</head>
<body>
<div class="img-container">
<img src="image1.jpg" class="active">
<img src="image2.jpg">
<img src="image3.jpg">
</div>
<script>
const images = document.querySelectorAll('.img-container img');
let index = 0;
setInterval(() => {
images[index].classList.remove('active');
index++;
if (index >= images.length) {
index = 0;
}
images[index].classList.add('active');
}, 2000);
</script>
</body>
</html>以上代碼中，我們首先創建一個名為img-container的div元素，該元素的position設置為relative，使里面的絕對定位的圖片能引用到該div元素。
img元素定位在img-container內部，其opacity屬性設置為0，這是因為我們想讓圖片默認不可見而采用淡入淡出的效果，通過設置過渡動畫使得圖片的出現更加平滑自然。
通過JavaScript代碼，我們實現了自動輪播的效果，每隔兩秒切換一個圖片，通過classList來實現圖片的切換。其中active類用于表示當前顯示的圖片，通過添加和移除active類，我們實現了圖片之間的切換。
以上便是使用CSS和JavaScript制作簡單圖片切換效果的全部內容，通過這種方法，您可以快速實現一個簡單的圖片輪播效果，為您的網站添加更加生動的頁面元素，提升用戶體驗。
上一篇css圖片隱藏效果
下一篇css圖片點擊圓點可變