HTML輪播圖左右代碼

使用HTML和CSS可以創建一個簡單的輪播圖，讓你的網站更加動態和吸引人。以下是輪播圖左右代碼：

HTML代碼：

<div class="slideshow-container"><!-- 輪播圖容器 -->
<div class="mySlides fade"><!-- 輪播項 -->
<img src="slide1.jpg" style="width:100%">
</div><div class="mySlides fade"><img src="slide2.jpg" style="width:100%">
</div><div class="mySlides fade"><img src="slide3.jpg" style="width:100%">
</div><a class="prev" onclick="plusSlides(-1)"><<!-- 左箭頭按鈕 --><a class="next" onclick="plusSlides(1)">><!-- 右箭頭按鈕 --></div>

CSS代碼：

/* 輪播圖容器 */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* 輪播項 */
.mySlides {
display: none;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
/* 左箭頭按鈕 */
.prev {
position: absolute;
top: 50%;
left: 0;
margin-top: -22px;
width: 40px;
height: 44px;
border-radius: 0 3px 3px 0;
background-color: rgba(0,0,0,0.5);
color: #fff;
padding: 10px;
cursor: pointer;
}
/* 右箭頭按鈕 */
.next {
position: absolute;
top: 50%;
right: 0;
margin-top: -22px;
width: 40px;
height: 44px;
border-radius: 3px 0 0 3px;
background-color: rgba(0,0,0,0.5);
color: #fff;
padding: 10px;
cursor: pointer;
}

這些代碼可以讓你創建一個具有左右箭頭的輪播圖，當用戶點擊箭頭時可以切換輪播項。你可以根據自己的需要進行修改和擴展，比如添加更多的輪播項、更改箭頭樣式等等。