こんにちは、ティロといいます
プログラミングが好きな理系大学生です
今回はコピペするだけで簡単にスライドショーを設置する方法を紹介します。
javascriptとhtml,cssを使って作りました。
写真がスライドするたびにキャッチフレーズもフェードイン、フェードアウトします。
デモサイトをご覧ください。
htmlは以下のようにします。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="sample.css"> </head> <body> <div class="carousel"> <div class="carousel-img"> <img src="images/imac-1999636_1920.png"> <img src="images/office-2717014_1920.jpg"> <img src="images/programming-1873854_1920.png"> </div> <div class="carousel-text"> <div>スマートフォンに対応したレスポンシブデザイン</div> <div>SEOを意識したコーディング</div> <div>エラーのないきれいなコーディング</div> </div> </div> <script src="sample.js"></script> </body> </html> |
cssは以下のようになります。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 | @charset "UTF-8"; body { margin: 0; padding: 0; } .carousel { width: 100%; height: 600px; } .carousel-text { position: relative; top: 90%; left: 8%; z-index: 999; color: #fff; font-size: 30px; } .carousel-text div { position: absolute; } .carousel-text div:not(:last-child) { opacity: 0; } .carousel-text div:last-child { opacity: 1; } .carousel-img { position: relative; } .carousel-img img { position: absolute; top: 0; left: 0; width: 100%; height: 800px; object-fit: cover; } @media screen and (max-width: 568px) { .carousel-img img { height: 400px; } .carousel-text { top: 50%; left: 8%; font-size:16px; } } .carousel-img img:not(:last-child) { opacity: 0; } .carousel-img img:last-child { opacity: 1; } |
javascript は以下のようになります。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 | let carouselImag = document.querySelector('.carousel-img').children; let carouselText = document.querySelector('.carousel-text').children; let imgCount = carouselImag.length; //写真の枚数を取得 let TextCount = carouselText.length; //文章の数を取得 let currentIndex = imgCount - 1; let sideTime = 50; //値が小さいと素早くフェードイン、フェードアウトする let duration = 5000; //スライド時間 carouselImag[currentIndex].style.opacity = 1; function fadeOut(currentIndex) { let opacityInt = carouselImag[currentIndex].style.opacity * 100; let opacityText = carouselText[currentIndex].style.opacity * 100; let interval = setInterval(() => { opacityInt = opacityInt - 10; //sideTimeミリ秒にopacityが0.1小さくなる opacityText = opacityText - 10; carouselImag[currentIndex].style.opacity = opacityInt / 100; carouselText[currentIndex].style.opacity = opacityText / 100; if (opacityInt <= 0 && opacityText <= 0) { clearInterval(interval); carouselImag[currentIndex].style.opacity = 0; //opacityを0にする。0にしないとマイナスの値になる。 carouselText[currentIndex].style.opacity = 0; } }, sideTime) } function fadeIn(nextIndex) { let opacityInt = carouselImag[nextIndex].style.opacity * 100; let opacityText = carouselText[nextIndex].style.opacity * 100; let interval = setInterval(() => { opacityInt = opacityInt + 10; //sideTimeミリ秒にopacityが0.1大きくなる opacityText = opacityText + 10; carouselImag[nextIndex].style.opacity = opacityInt / 100; carouselText[nextIndex].style.opacity = opacityText / 100; if (opacityInt >= 100 && opacityText >=100) { clearInterval(interval); carouselImag[nextIndex].style.opacity = 1; carouselText[nextIndex].style.opacity = 1; } }, sideTime); } function imgNextside() { let nextIndex = (currentIndex + 1) % imgCount; //ループさせる fadeOut(currentIndex); fadeIn(nextIndex); currentIndex = nextIndex; //次のスライドをセットする } setInterval(imgNextside, duration); |
setIntervalでimgNextside関数をdurationごとにループさせています。
フェードイン、フェードアウトはsetintervalでopacityを徐々に値を変えることで実現しています。
参考にしたサイト
JavaScriptで画像をフェードして切り替える方法を現役エンジニアが解説【初心者向け】 | TechAcademyマガジン