本日はjavascriptとjqueryでよくサイトなので見かける、複数画像を一定間隔の昇順で切り替え表示させるデモを実施してみたいと思います。
【完成後】
1秒間隔で5枚の画像が昇順で切り替わります(*^^)v
画像が表示されない場合はCtrl + F5 キー押してみてください。
それでは行ってみましょう!
Menu
画像を切り替える
・5枚の画像を用意します。
・5枚の画像のパスを配列化します。
・1秒ごとに画像を切り替えて表示させて完成です。(setInterval)
サンプルコード
【HTML】
1 2 3 4 5 6 7 8 9 10 11 12 13 | <html lang="jn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://code.jquery.com/jquery-1.8.3.js"></script> <title>一定時間で画面切り替え</title> </head> <body> <div class="imgSample"> <!--ここにimgが追加されます--> </div> </body> </html> |
【javascript/JQuery】
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 | <script type="text/javascript"> //➀ $('<img src="">').prependTo('.imgSample'); //JQuery //② let png1 = "111.png"; let png2 = "222.png"; let png3 = "333.png"; let png4 = "444.png"; let png5 = "555.png"; //③ let srcAry = [png1,png2,png3,png4,png5]; //④ let i = 0; setInterval(function() { //⑤ if (i === srcAry.length) { i = 0; } //⑥ $('.imgSample > img').attr('src', srcAry[i]); //JQuery console.log(i++); //⑦ }, 1000); </script> |
解説
➀HTMLのimgSampleクラスの子の先頭に<img src=””>を追加します。(prependTo)
②画像のパスを変数化します。
③配列に格納します。
④setIntervalで1000ミリ秒(1秒)ごとに動作させます。
⑤変数iとsrcAry.length(配列インデックス)の数が同じになったら変数iを0に戻して昇順になるようにします。
⑥imgSampleクラスの子要素のimg要素のsrc属性値にattrメソッドでsrcAry[i]の配列要素(画像パス)が設定されます。
⑦変数iをプラス1して、次の配列srcAry[ i ](画像)を表示させます。
今回使用した画像5枚
【結果】
1秒ごとに昇順で画像が切り替わります\(^^)/
まとめ
今回の解説でとりあえずジャバスクリプトのsetIntervalを使用することにより基本的な画像の昇順着替処理ができるようになったと思います。
あとはこの動作に綺麗な写真を使用したりして、JQueryのフェードやスライドなどの動作を付加していけばホームページやブログがかっこよく動作させることが可能になります。
この機会にブログなどにこのような動的な機能を付加してかっこよくさせてくださいネ(★‿★)
以上です。
画像切り換え関連
JavaScript/jQuery
その他、下記の記事も関連した記事になりますので是非参考にしてみてください!