HTML中可以使用左右點擊滑動圖片的代碼，這可以讓網站更加生動有趣。使用pre標簽來展示這段代碼，如下所示：
<html>
<head>
<style>
.slider {
width: 600px;
height: 300px;
overflow: hidden;
position: relative;
}
.slider img {
width: 600px;
height: 300px;
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity 1s ease-in-out;
}
.slider img.active {
opacity: 1;
}
.button {
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: rgba(0, 0, 0, 0.5);
color: white;
font-size: 24px;
padding: 5px 10px;
cursor: pointer;
z-index: 1;
}
.button.left {
left: 0;
}
.button.right {
right: 0;
}
</style>
</head>
<body>
<div class="slider">
<img src="image1.jpg" class="active">
<img src="image2.jpg">
<img src="image3.jpg">
<img src="image4.jpg">
<div class="button left" onclick="prevImage()"><<<<<<<<<<<<< Prev</div>
<div class="button right" onclick="nextImage()">Next >>>>>>>>>>>>>></div>
</div>
<script>
var images = document.getElementsByTagName("img");
var current = 0;
function nextImage() {
images[current].classList.remove("active");
current = (current + 1) % images.length;
images[current].classList.add("active");
}
function prevImage() {
images[current].classList.remove("active");
current = (current - 1 + images.length) % images.length;
images[current].classList.add("active");
}
</script>
</body>
</html>上面的代碼包括一個div元素，作為圖片展示的容器，以及多個img元素，分別展示不同的圖片。使用JavaScript代碼實現了左右按鈕的點擊事件，來切換圖片展示。這些代碼的CSS樣式設置了容器的寬度、高度和背景顏色，并且使用了position屬性來將圖片絕對定位，以及使用opacity屬性和transition屬性來實現圖片的淡入淡出效果。這使得用戶可以更加流暢地查看圖片，并且提高了展示的美觀度。上一篇c json代碼解析
下一篇python 按條件分組