<!DOCTYPE html>
<html>
<head>
<title>Beautiful Beaches</title>
<meta charset="utf-8">
</head>
<body>
<div id="beach-info"></div>
<script>
let beaches = [
{
image: "https://example.com/beaches/beach1.jpg",
address: "ハワイ州オアフ島",
hemisphere: "北半球",
temperatures: "夏：30°C、冬：25°C",
sea: "太平洋"
},
{
image: "https://example.com/beaches/beach2.jpg",
address: "タイ・プーケット島",
hemisphere: "北半球",
temperatures: "夏：32°C、冬：28°C",
sea: "アンダマン海"
},
{
image: "https://example.com/beaches/beach3.jpg",
address: "オーストラリア・グレートバリアリーフ",
hemisphere: "南半球",
temperatures: "夏：28°C、冬：23°C",
sea: "コーラル海"
},
{
image: "https://example.com/beaches/beach4.jpg",
address: "メキシコ・カンクン",
hemisphere: "北半球",
temperatures: "夏：33°C、冬：25°C",
sea: "カリブ海"
}
];
let beachInfo = document.getElementById("beach-info");
let currentIndex = 0;
function showBeachInfo(index) {
let beach = beaches[index];
let img = new Image();
img.src = beach.image;
img.onload = function() {
beachInfo.innerHTML = `<img src="${beach.image}" />
<p>住所：${beach.address}</p>
<p>半球：${beach.hemisphere}</p>
<p>平均気温：${beach.temperatures}</p>
<p>海：${beach.sea}</p>`;
};
}
showBeachInfo(currentIndex);
setInterval(function() {
currentIndex++;
if(currentIndex >= beaches.length) {
currentIndex = 0;
}
showBeachInfo(currentIndex);
}, 3000);
</script>
</body>
</html>
