手で書くことができるカルーセル画像：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        img{
            width: 100%;
            height: 100%;
        }
    </style>

</head>
<body>

<div id="base" style="width:  300px;height: 300px;border: red 2px solid"><img id="bigimg" src="images/01.jpg"></div>

<div id="imgUI">
    <div style="float: left;width:  50px;height: 50px;border: red 1px solid"><img src="img/01.jpg"></div>
    <div style="float: left;width:  50px;height: 50px;border: red 1px solid"><img src="img/02.jpg"></div>
    <div style="float: left;width:  50px;height: 50px;border: red 1px solid"><img src="img/03.jpg"></div>
</div>

<script>
   
    var imgUI = document.getElementById('imgUI');
    var img = imgUI.getElementsByTagName('img');
    img[0].onmouseover = function () {
        document.getElementById('bigimg').src = img[0].src;
    };
    img[1].onmouseover = function () {
        document.getElementById('bigimg').src = img[1].src;
    };
    img[2].onmouseover = function () {
        document.getElementById('bigimg').src = img[2].src;
    };
</script>
</body>

</html>

これはレンダリングです：

どの画像がクリックされ、どの画像が拡大されるかを意味します！マウスのスクリーンショットは見えず、p-pictureは怠惰です。理解できるようにテキストを入力してください。

写真は、TVシリーズのcpsが好きな写真です。気に入らない場合は、違反している場合はご連絡ください。！！

許可なく再配布しないでください！離れる前に好きなものを残してください♪（^∇^ *）

HTMLはカルーセル画像を簡単に取得できます。手元に置いてください。CSSを作成する必要はありません。

手で書くことができるカルーセル画像：

これはレンダリングです：

おすすめ