HTML實現左右切換圖片的特效，一般可以使用JavaScript或jQuery來實現，下面是一個基于jQuery的示例程序：
<html>
<head>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
.photo-box {
display: flex;
justify-content: center;
align-items: center;
margin: 20px 0;
overflow: hidden;
position: relative;
}
.photo-box img {
width: 100%;
height: 100%;
object-fit: cover;
}
.prev-btn, .next-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 50px;
height: 50px;
background-color: rgba(255, 255, 255, 0.7);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.prev-btn {
left: 20px;
}
.next-btn {
right: 20px;
}
</style>
</head>
<body>
<div class="photo-box">
<img src="image1.jpg">
<div class="prev-btn"><i class="fa fa-chevron-left"></i></div>
<div class="next-btn"><i class="fa fa-chevron-right"></i></div>
</div>
<script>
var photoIndex = 1;
var photoCount = 4;
$('.prev-btn').click(function() {
photoIndex--;
if (photoIndex < 1) {
photoIndex = photoCount;
}
var photoUrl = 'image' + photoIndex + '.jpg';
$('.photo-box img').attr('src', photoUrl);
});
$('.next-btn').click(function() {
photoIndex++;
if (photoIndex > photoCount) {
photoIndex = 1;
}
var photoUrl = 'image' + photoIndex + '.jpg';
$('.photo-box img').attr('src', photoUrl);
});
</script>
</body>
</html>上述代碼中包含了一個包括4張圖片的圖片輪播特效，左右兩個按鈕通過JavaScript控制圖片的輪播效果。通過CSS設置圖片盒子的樣式，以實現輪播效果的展現。加入簡單的JavaScript交互代碼，便可以實現圖片輪播特效。
上一篇python 震動傳感器
下一篇c 更新.json文件