下面是一篇關于HTML照片循環可以滑動的代碼的文章。

在網頁中，經常需要展示一些照片。如果將這些照片放在一個固定的位置，會顯得比較死板。為了更好地展示照片，我們可以使用HTML代碼實現照片循環并且可以滑動的效果。

<div class="slideshow-container">
<div class="mySlides">
<img src="img1.jpg" style="width:100%">
</div>
<div class="mySlides">
<img src="img2.jpg" style="width:100%">
</div>
<div class="mySlides">
<img src="img3.jpg" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<script>
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
</script>

這個代碼包含一個名為“slideshow-container”的div，它包含了一個名為“mySlides”的div。在“mySlides”中，有多個圖片的地址。這些圖片會在網頁中循環展示，并且可以通過點擊左右兩側的箭頭來切換圖片。這個效果是通過Javascript代碼實現的。

在Javascript代碼中，我們定義了一個變量slideIndex來追蹤當前展示的圖片。通過plusSlides和currentSlide函數，我們可以改變slideIndex的值來切換圖片。而showSlides函數則根據slideIndex的值來決定展示哪個圖片。

通過這個代碼，我們可以讓網頁中的照片更加生動，也讓用戶體驗更加豐富。如果你也需要展示一些圖片，不妨嘗試一下這樣的方式。