在網(wǎng)頁(yè)開(kāi)發(fā)中，經(jīng)常需要展示圖片并提供左右切換的功能。這種圖片切換效果可以使用HTML和JavaScript實(shí)現(xiàn)，下面是一個(gè)左右自動(dòng)切換圖片的代碼示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>自動(dòng)切換圖片</title>
<style>
.image-container {
display: flex;
justify-content: center;
align-items: center;
width: 500px;
height: 350px;
margin: 0 auto;
position: relative;
}
.image-container img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
transition: opacity .4s linear;
}
.image-container img.active {
opacity: 1;
z-index: 1;
}
.image-container img:not(.active) {
opacity: 0;
z-index: 0;
pointer-events: none;
}
</style>
</head>
<body>
<div class="image-container">
<img src="image1.jpg" class="active">
<img src="image2.jpg">
<img src="image3.jpg">
</div>
<script>
const images = document.querySelectorAll('.image-container img');
let counter = 0;
setInterval(() => {
images[counter].classList.remove('active');
counter = (counter + 1) % images.length;
images[counter].classList.add('active');
}, 3000);
</script>
</body>
</html>在代碼中，先定義一個(gè)class為“image-container”的div容器，用于裝載圖片。在該容器中，使用絕對(duì)定位將三張圖片覆蓋在一起，只有class為“active”的圖片才會(huì)顯示，其他圖片完全透明并且禁止交互。使用JavaScript中的setInterval函數(shù)實(shí)現(xiàn)圖片自動(dòng)切換的效果。
代碼中的一個(gè)小技巧是使用指針事件禁用不活動(dòng)的圖像的交互，以避免其他圖像在z-index變化時(shí)受到意外的點(diǎn)擊事件。此外，通過(guò)使用CSS flex布局，可以使圖片在容器中水平居中和垂直居中。
有了這個(gè)簡(jiǎn)單的代碼示例，您可以輕松創(chuàng)建自己的左右自動(dòng)切換圖片的效果，希望可以對(duì)您的網(wǎng)頁(yè)開(kāi)發(fā)項(xiàng)目有所幫助！