htmlでスライドショー作成～合わせて桜フォトフレームのご紹介～

少し時間が空いてしまいました😅
色々と所要があり、ブログの作成が行えず時間が空いてしまいました。

今回は先日のブログでご紹介した桜フォトフレームについての技術内容についてまとめておこうと思います。

■桜フォトフレーム
■桜フォトフレームのソースコード
■写真のスライドショー
■最後に
■参考

■桜フォトフレーム

桜フォトフレームは別のブログにてご紹介しております。
elsammit-diarypractice.hatenablog.com

こちらのように桜を背景に写真をスライドショーさせるWebアプリになります。
f:id:Elsammit:20210313094910g:plain

すでに桜の表現についてはまとめていますのでこちらをご参照ください。
elsammit-beginnerblg.hatenablog.com

今回は写真をスライドショーさせる処理についてまとめておきます。

■桜フォトフレームのソースコード

ソースコードはこちらに格納しております。
よろしければどうぞ。
https://github.com/Elsammit/SakuraPhotoFrame.git

■写真のスライドショー

スライドショーはjavascriptとhtml、cssで実現させました。
まずはhtmlです。
コードはこちら。

<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <link rel="stylesheet" href="sakura.css">
        <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
        <script src="sakura.js"></script>
        <div id="photo">
            <ul class="slideshow">
                <li class="current"><img src="image/Photo1.JPG" alt="A" class="photoImg" id="photoNum1"></li>
                <li><img src="image/Photo2.JPG" alt="B" class="photoImg" id="photoNum2"></li>
                <li><img src="image/Photo3.JPG" alt="C" class="photoImg"  id="photoNum3"></li>
                <li><img src="image/Photo4.JPG" alt="D" class="photoImg" id="photoNum4"></li>
                <li><img src="image/Photo5.JPG" alt="E" class="photoImg"  id="photoNum5"></li>
            </ul>
        </div>
    </body>
</html>

このソースのようなcurrentクラスが定義されたimgタグが画像として表示します。

<li class="current"><img src="image/Photo1.JPG" alt="A" class="photoImg" id="photoNum1"></li>

javascriptでは一定時間毎にcurrentクラスを切り替えることで表示するimgタグを切り替えていきます。

さらに、jQueryを用いるので

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

を定義しました。

ではjavascriptのコードです。こちら！！

var count = 0;
(function($){
    $(document).ready(function(){
      var slides = $(".slideshow > li");
      
      function toggle_slide(){
        count = (count + 1) % 5;
        slides.removeClass("current").eq(count).addClass("current");
      }
      setInterval(toggle_slide, 5000);
    });  
})(jQuery);

slideshowクラス内のliを変数slidesとして取得。
そして、一定期間(今回は5秒間)でcurrentクラスを切り替えています。
切り替えのコードはこちら。

slides.removeClass("current").eq(count).addClass("current");

こちらのコードは現在のcurrentクラスを削除し(count+1) %5したli番号にcurrentクラスを付与します。

最後にcssですが、

.slideshow > li {
    opacity: 0;
    transition: opacity 1s;
}
  
.slideshow > li.current {
    opacity: 1;
}

としています。
currentクラスはopacityで表示させ、他の画像は0で非表示とさせました。
また、切り替えはフェードアウトさせたかったので、
transitionを設定しました。

ついでですが、、、
写真(画像)下部の●ですが、コードはこちらのようになります。

function selectImgcircle(count){
    for(var i=1;i<=5;i++){
        var buf = "select" + i;
        document.getElementById(buf).style.border = "1px solid rgb(206, 202, 202)";
        document.getElementById(buf).style.backgroundColor = "rgb(206, 202, 202)";
    }
    
    var selectID = "select"+(count+1);
    document.getElementById(selectID).style.border = "1px solid black";
    document.getElementById(selectID).style.backgroundColor = "black";
}

<div id="selectedImg">
    <div id="select1"></div>
    <div id="select2"></div>
    <div id="select3"></div>
    <div id="select4"></div>
    <div id="select5"></div>
</div>