javascriptでスライドショーを作ってみた

#study_record

2022.03.10

javascriptでスライドショーを作成してみた。その中で学んだこと等を記録していきたいと思う。

HTMLとCSSについて

まず見た目は上画像のような感じで、CSSとHTMLは以下のような感じ。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>スライドショーを作成してみた</title>
</head>
<style>
    body {
        text-align: center;
    }

    h1 {
        margin: 0 auto;
        display: inline-block;
        padding: 10px;
        border: 1px solid;
        font-size: 24px;
        margin-top: 80px;
        margin-bottom: 100px;
    }

    .box {
        content: "";
        position: absolute;
        left: 50%;
        transform: translateX(-45%);
        top: 82px;
        width: 170px;
        height: 56px;
        border: 1px solid;
        z-index: -100;
    }

    .container {
        width: 600px;
        max-width: 100%;
        margin: 0 auto;

    }

    .triangle_right {
        display: block;
        box-sizing: border-box;
        border-top: 50px solid transparent;
        border-bottom: 50px solid transparent;
        border-left: 80px solid#F0897F;
    }

    .triangle_left {
        display: block;
        width: 80px;
        box-sizing: border-box;
        border-top: 50px solid transparent;
        border-bottom: 50px solid transparent;
        border-right: 80px solid#b2ce54;
    }

    .slide {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 800px;
        max-width: 100%;
        margin: 0 auto;
    }


    img {
        width: 100%;
    }
</style>

<body>
    <div class="box"></div>
    <h1>My memory</h1>
    <div class="slide">
        <div class="triangle_left" id="triangle_left"></div>
        <div id="picbox" class="container">
            <img id="slide_img" src="img/pic1.jpg" alt="写真">
        </div>
        <div class="triangle_right" id="triangle_right"></div>
    </div>

Javascriptについて

まず全体のコード内容は以下の通り。

　　　　<script>
        const pics = ["img/pic1.jpg", "img/pic2.jpg", "img/pic3.jpg"];
        const left_tr = document.getElementById("triangle_left");
        const right_tr = document.getElementById("triangle_right");
        const pic = document.getElementById("slide_img");
        const picBox = document.getElementById("picbox")
        let n = 0;
        //写真が切り替わるタイミングの動きを定義
        //ふわっと出る感じに
        function slideStyle() {
            pic.style.opacity = "0";
            pic.style.transition = "inherit"
            setTimeout(() => {
                pic.style.opacity = "1";
                pic.style.transition = "all 2s";
            }, 50)
        }
        //スライドショーの動きを定義
        function slideShow() {
            id = setInterval(() => {
                if (n < 2) {
                    slideStyle();
                    n = n + 1;
                    document.getElementById("slide_img").src = pics[n];
                    console.log("スライド時の挙動");
                } else {
                    slideStyle();
                    n = 0;
                    document.getElementById("slide_img").src = pics[n];
                    console.log("スライド時の挙動");
                }
            }, 3000)
        }
        slideShow();
        right_tr.addEventListener("click", () => {
            if (n < 2) {
                slideStyle();
                clearInterval(id);
                n = n + 1;
                document.getElementById("slide_img").src = pics[n];
                slideShow();
            } else {
                slideStyle();
                clearInterval(id);
                n = 0;
                document.getElementById("slide_img").src = pics[n];
                slideShow();
            }
        })
        left_tr.addEventListener("click", () => {
            if (n > 0) {
                slideStyle();
                clearInterval(id);
                n = n - 1;
                document.getElementById("slide_img").src = pics[n];
                slideShow();
            } else {
                slideStyle();
                clearInterval(id);
                n = 2;
                document.getElementById("slide_img").src = pics[n];
                slideShow();
            }
        })
        picBox.addEventListener("click", () => {
            clearInterval(id);
        })

    </script>

以下細かい部分を記録

①各要素の内容を取得

 　　　　const pics = ["img/pic1.jpg", "img/pic2.jpg", "img/pic3.jpg"];
        const left_tr = document.getElementById("triangle_left");
        const right_tr = document.getElementById("triangle_right");
        const pic = document.getElementById("slide_img");
        const picBox = document.getElementById("picbox")

②写真をふわっと変化させるためにstyleを変化させる関数

スライドが切り替わったのち0.05秒かけてふわっと出てくるようにした。

  let n = 0;
        //写真が切り替わるタイミングの動きを定義
        //ふわっと出る感じに
        function slideStyle() {
            pic.style.opacity = "0";
            pic.style.transition = "inherit"
            setTimeout(() => {
                pic.style.opacity = "1";
                pic.style.transition = "all 2s";
            }, 50)
        }

②スライドショーの動き

繰り返し、足していくことで写真が入れ替わるように、そして最大値2を超えたら0に戻るように定義。

//スライドショーの動きを定義
        function slideShow() {
            id = setInterval(() => {
                if (n < 2) {
                    slideStyle();
                    n = n + 1;
                    document.getElementById("slide_img").src = pics[n];
                    console.log("スライド時の挙動");
                } else {
                    slideStyle();
                    n = 0;
                    document.getElementById("slide_img").src = pics[n];
                    console.log("スライド時の挙動");
                }
            }, 3000)
        }
        slideShow();

③右▶をクリックした時の動き

動きとしてはスライドショーを実装した動きと同様であるが、一度clearInterval(id)でスライドショーの動きを止めている。これをしないと、スライドする時間の間隔がおかしくなった。

right_tr.addEventListener("click", () => {
            if (n < 2) {
                slideStyle();
                clearInterval(id);
                n = n + 1;
                document.getElementById("slide_img").src = pics[n];
                slideShow();
            } else {
                slideStyle();
                clearInterval(id);
                n = 0;
                document.getElementById("slide_img").src = pics[n];
                slideShow();
            }
        })

④左◀をクリックした時の動き

右クリックとは逆に写真が動いていくように定義。

 left_tr.addEventListener("click", () => {
            if (n > 0) {
                slideStyle();
                clearInterval(id);
                n = n - 1;
                document.getElementById("slide_img").src = pics[n];
                slideShow();
            } else {
                slideStyle();
                clearInterval(id);
                n = 2;
                document.getElementById("slide_img").src = pics[n];
                slideShow();
            }
        })

⑤写真をクリックしたらスライドショーが止める

 picBox.addEventListener("click", () => {
            clearInterval(id);
        })

思うこと

今回はこのようにスライドショーを実施し、それらしきものはできたが、きっと突っ込みところ満載なのだと思う、、。でも思うように動くとやっぱりうれしい。

学んだこと、日常

javascriptでスライドショーを作ってみた

HTMLとCSSについて

Javascriptについて

思うこと

contact