height: 200px;

３枚の写真を使ってスライドショーを作る場合

<!DOCTYPE html>

<html>

<head>

<style>

/* Slideshow container */

.slideshow-container {

max-width: 100%;

position: relative;

margin: auto;

height: 400px; /* Adjust the height as needed (ここの調整は重要です。今回の写真は600x450pxを使用。height は max 600px ぐらいがいいのかも？) */) */

overflow: hidden;

}

/* Hide the images by default */

.mySlides {

position: absolute;

top: 0;

left: 0;

opacity: 0;

transition: opacity 1s ease-in-out;

height: 100%;

width: 100%;

}

</style>

</head>

<body>

</div>

</div>

</div>

</div>

var slideIndex = 0;

showSlides();

function showSlides() {

　var i;

　var slides = document.getElementsByClassName("mySlides");

　for (i = 0; i < slides.length; i++) {

　 slides[i].style.opacity = "0";

}

slideIndex++;

if (slideIndex > slides.length) { slideIndex = 1;

}

slides[slideIndex - 1].style.opacity = "1"; setTimeout(showSlides, 5000); // Change slide every 5 seconds

}

</script>

</body>

</html>

✍🏻 ホームページ Ameba Ownd でスクリプト (script) を使わないで “写真をスライドショー” する方法覚書 📝

2023.05