【JQuery】複数の画像を一定の時間で昇順で切り替え表示させる

投稿者: | 2021年1月24日
JQueryアイキャッチ画像

本日はjavascriptとjqueryでよくサイトなので見かける、複数画像を一定間隔の昇順で切り替え表示させるデモを実施してみたいと思います。

 

完成後

1秒間隔で5枚の画像が昇順で切り替わります(*^^)v

画像が表示されない場合はCtrl + F5 キー押してみてください。

 

 

それでは行ってみましょう!

 

画像を切り替える

 

大まかな作成の流れ

・5枚の画像を用意します。

・5枚の画像のパスを配列化します。

・1秒ごとに画像を切り替えて表示させて完成です。(setInterval)

 

 

サンプルコード

【HTML】

 

【javascript/JQuery】

解説

HTMLのimgSampleクラスの子の先頭に<img src=””>を追加します。(prependTo

画像のパスを変数化します。

配列に格納します。

setIntervalで1000ミリ秒(1秒)ごとに動作させます。

変数iとsrcAry.length(配列インデックス)の数が同じになったら変数iを0に戻して昇順になるようにします。

imgSampleクラスの子要素のimg要素のsrc属性値attrメソッドでsrcAry[i]の配列要素(画像パス)が設定されます。

変数iをプラス1して、次の配列srcAry[ i ](画像)を表示させます。

 

今回使用した画像5枚

111 222 333 444 555

 

【結果】

1秒ごとに昇順で画像が切り替わります\(^^)/

 

 

 

まとめ

今回の解説でとりあえずジャバスクリプトのsetIntervalを使用することにより基本的な画像の昇順着替処理ができるようになったと思います。

あとはこの動作に綺麗な写真を使用したりして、JQueryのフェードスライドなどの動作を付加していけばホームページやブログがかっこよく動作させることが可能になります。

この機会にブログなどにこのような動的な機能を付加してかっこよくさせてくださいネ(★‿★)

以上です。

その他、下記の記事も関連した記事になりますので是非参考にしてみてください!

重複なしのランダムデータ(乱数)

setIntervalでリアルタイムに日時と曜日を表示