クリックして、2秒かけて450度回転してから3枚の画像がランダムに差し替わり、1080度回転して止まる書き方を教えてください
<div>
<img id="myImage" src="初期の画像1.jpg" alt="初期の画像1">
</div>
<script>
// 画像要素を取得します
var image = document.getElementById("myImage");
// 画像のパスの配列を作成します
var imagePaths = [
"新しい画像1.jpg",
"新しい画像2.jpg",
"新しい画像3.jpg"
];
// クリックイベントの処理を定義します
function handleClick() {
// 画像を回転させるアニメーションを設定します
image.style.transition = "transform 2s";
image.style.transform = "rotate(450deg)";
// 2秒後に画像を差し替えてさらに回転させるアニメーションを設定します
setTimeout(function() {
// ランダムな画像のインデックスを選択します
var randomIndex = Math.floor(Math.random() * imagePaths.length);
// 新しい画像のパスを取得します
var newImagePath = imagePaths[randomIndex];
// 画像を差し替えます
image.src = newImagePath;
image.alt = "新しい画像";
image.style.transform = "rotate(1080deg)";
}, 2000);
}
// クリックイベントのリスナーを追加します
image.addEventListener("click", handleClick);
// 画像のパスの配列を作成します
var imagePaths = [
"新しい画像1.jpg",
"新しい画像2.jpg",
"新しい画像3.jpg"
];
// ランダムな画像のインデックスを選択します
var randomIndex = Math.floor(Math.random() * imagePaths.length);
// 新しい画像のパスを取得します
var newImagePath = imagePaths[randomIndex];
</script>
関連
ディスカッション
コメント一覧
まだ、コメントがありません