【JS】Javascriptでパラパラ画像表示（制御ボタン付き）を作ってみる

2015/11/21 2018/09/10

2枚以上の画像をパラパラと切り替えるスクリプトをjavascriptで作ってみましたので、ご紹介。
ごくごく簡単なイメージギャラリーのようなイメージです。

パラパラ画像切替スクリプト

デモ

※jQuery必須です。

スクリプト

HTML

画像ファイルの名称を「img1.jpg」から「img10.jpg」として、imgフォルダに設置します。
htmlには最初に表示したい画像（start.jpg）を配置します。

<div id="tgPara2Images">
    <img src="img/start.jpg" alt="Image0" id="paraImage">
    <form>
        <input type="button" value="START" id="startButton">
        <input type="button" value="STOP" id="stopButton">
    </form>
</div>

<form>

</form>

</div>

Javascript

画像10枚を配列にセットし、setInterval() で画像の切り替え処理を繰り返しているだけです。
切り替えに関しては、パスを含む画像名を配列にセットし、ループごとに画像名の数字をカウントアップするしようとしています。

この辺りはjQueryの画像インデックスを利用するなど他にもやりようはあると思いますが、簡単に配列を作成する方式をとりました。

<script>
$(function() {
    var imgs = new Array();
    var cnt = 10;       // 画像枚数
    var speed = 1000;   // ミリ秒(1秒=1000)
    var start = 0;
    var timerName;
    
    for (i=0; i<cnt; i++) {
        imgs[i] = './img/img'+ (i+1) +'.jpg';
    }

    //timerName = setInterval(pars2images, speed);   // 自動的に開始する場合はコメント外す

    // パラパラ実行
    function pars2images() {
        $("#paraImage").attr("src", imgs[start]);
        start++;
        if (start >= imgs.length) {
            start = 0;
        }
    }

    // スタート
    $("#startButton").click(function(){
        timerName = setInterval(pars2images, speed);
    })

    // ストップ
    $("#stopButton").click(function(){
        if (timerName) {
            clearInterval(timerName);
        }
    });
});
</script>

$(function() {

var imgs = new Array();

var cnt = 10; // 画像枚数

var speed = 1000; // ミリ秒(1秒=1000)

var start = 0;

var timerName;

for (i=0; i<cnt; i++) {

imgs[i] = './img/img'+ (i+1) +'.jpg';

}

//timerName = setInterval(pars2images, speed); // 自動的に開始する場合はコメント外す

// パラパラ実行

function pars2images() {

$("#paraImage").attr("src", imgs[start]);

start++;

if (start >= imgs.length) {

start = 0;

}

// スタート

$("#startButton").click(function(){

timerName = setInterval(pars2images, speed);

})

// ストップ

$("#stopButton").click(function(){

if (timerName) {

clearInterval(timerName);

}

});

</script>

(2015.11.21追記) 制御ボタンをつけてみた

「スタート」「ストップ」だけでは味気ないので、コマ送り、最初、最後に戻れるボタンをつけてみました。
それとも無い、start画像を用意し、JSを若干ではありますが改修しています。

デモ

スクリプト

HTML

初回時やリロード後しか表示しない初期画像（start.jpg）を配置。
スタート、ストップに加え、

「<<」最初
「<」前
「>」次
「>>」最後

ボタンを追加します。

<div id="tgPara2Images">
    <img src="img/start.jpg" alt="startImage" id="paraImage">
    <form>
        <input type="button" value="START" id="startButton">
        <input type="button" value="STOP" id="stopButton"><br>
        <input type="button" value="<<" id="firstButton">
        <input type="button" value="<" id="prevButton">
        <input type="button" value=">" id="nextButton">
        <input type="button" value=">>" id="lastButton">
    </form>
</div>

<form>

<input type="button" value=">" id="nextButton">

<input type="button" value=">>" id="lastButton">

</form>

</div>

Javascript

<script>
$(function() {
    var imgs = new Array();
    var cnt = 10;       // 画像枚数
    var speed = 1000;   // ミリ秒(1秒=1000)
    var now = -1;
    var timerName;
    
    for (i=0; i<cnt; i++) {
        imgs[i] = './img/img'+ (i+1) +'.jpg';
    }

    //timerName = setInterval(pars2images, speed);   // 自動的に開始する場合はコメント外す

    // パラパラ実行
    function pars2images() {
        now++;
        $("#paraImage").attr("src", imgs[now]);
        if (now >= imgs.length-1) {
            now = -1;
        }
    }

    // 次
    $("#nextButton").click(function(){
        now++;
        if (now == imgs.length) {
            now = 0;
        }
        $("#paraImage").attr("src", imgs[now]);
    });

    // 前
    $("#prevButton").click(function() {
        now--;
        if (now == -1) {
            now = cnt-1;
        }
        $("#paraImage").attr("src", imgs[now]);
    });

    // スタート
    $("#startButton").click(function(){
        timerName = setInterval(pars2images, speed);
    })

    // ストップ
    $("#stopButton").click(function(){
        if (timerName) {
            clearInterval(timerName);
        }
    });

    // 最初
    $("#firstButton").click(function(){
        now = 0;
        $("#paraImage").attr("src", imgs[now]);
    });

    // 最後
    $("#lastButton").click(function(){
        now = cnt-1;
        $("#paraImage").attr("src", imgs[now]);
    });
});
</script>

$(function() {

var imgs = new Array();

var cnt = 10; // 画像枚数

var speed = 1000; // ミリ秒(1秒=1000)

var now = -1;

var timerName;

for (i=0; i<cnt; i++) {

imgs[i] = './img/img'+ (i+1) +'.jpg';

}

//timerName = setInterval(pars2images, speed); // 自動的に開始する場合はコメント外す

// パラパラ実行

function pars2images() {

now++;

$("#paraImage").attr("src", imgs[now]);

if (now >= imgs.length-1) {

now = -1;

}

// 次

$("#nextButton").click(function(){

now++;

if (now == imgs.length) {

now = 0;

}

$("#paraImage").attr("src", imgs[now]);

});

// 前

$("#prevButton").click(function() {

now--;

if (now == -1) {

now = cnt-1;

}

$("#paraImage").attr("src", imgs[now]);

});

// スタート

$("#startButton").click(function(){

timerName = setInterval(pars2images, speed);

})

// ストップ

$("#stopButton").click(function(){

if (timerName) {

clearInterval(timerName);

}

});

// 最初

$("#firstButton").click(function(){

now = 0;

$("#paraImage").attr("src", imgs[now]);

});

// 最後

$("#lastButton").click(function(){

now = cnt-1;

$("#paraImage").attr("src", imgs[now]);

});

</script>

デモ１と違うところは、表示するファイルを定義いる配列番号のカウントアップ（及びダウン）のタイミング。
デモ１は表示後にカウントアップしていますが、デモ２は表示前にカウントアップし、アップ後の配列番号内容を参照するようにしています。
なので、最初の変数定義で now に -1 を持たせています。

作りこむ段階でその方が分かりやすかったので、採用しました。

パラパラ実行のあとは、各制御ボタンをクリックイベントでそれぞれの処理を行っているだけの、相変わらずのシンプルな内容となっています。

拡張していく基礎のようなスクリプトかな、と自分では思っています。
いわゆるイメージギャラリー（のようなもの）ですが、こんな簡単に出来るものなのですねぇ。

改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで

created by Rinker

-Javascript,jQuery
-ギャラリー, パラパラマンガ, 画像切替

: 多角レーダーチャートを作成する「Jquery Canvas Chart」を使ってみた。

作成しているシステムのとある一覧画面に、得点に応じたチャート図をつけて欲しいとの依頼があったので、色々と調べてみたのですが、「Jquery Canvas Chart」が簡単でわかり易かったのでご紹介。

: 【jQuery】タブの切替スクリプトを作成してみました

jQueryの練習で何かを作ってみようということで、yahooトップページのトピックスに使われているような、タブの切替を作ってみました。

: 【JS】ミニロト、ロト6、ロト7番号ジェネレータを作ってみた

以前のポストで作った「ミニロト」番号ジェネレータを拡張して、ロト３種を選択できるようにしたものを作ってみました。

: 半角英数から全角英数へなど、文字を変換するスクリプトをjQueryを使って組んでみた。

郵便局サイトの住所を入れる際、地番を入れる欄にて「全角数字を使え」という旨のエラーが出ました。
何でわざわざ全角で数字？漢数字ならまだしも、半角数字で入力されている場合はフロントエンドでなんとでもなるだろう。

: ブラウザごとに異なるCSSのclassを付与する仕組みをjQueryで作ってみた。

ブラウザごとに異なるCSSのclassを付与し、見た目を変えてみる仕組みをjQueryを使って作ってみました。

PREV: 【JS】配列をシャッフルするアルゴリズム、Fisher-Yates
NEXT: 【Firefox】タブを複製する方法

【JS】Javascriptでパラパラ画像表示（制御ボタン付き）を作ってみる

パラパラ画像切替スクリプト

デモ

スクリプト

HTML

Javascript

(2015.11.21追記) 制御ボタンをつけてみた

デモ

スクリプト

HTML

Javascript

【DIY】2x4や1x4など、SPF材サイズ早見表 (562,181)

【知識】電話番号の+81の意味と固定電話・携帯電話番号の書き方 (277,501)

TPPやLCCなど、時事や普段使っている「アルファベット略語」を集めてみた (254,936)

【歴史】江戸幕府歴代将軍一覧 (142,960)

【知識】牛肉の部位「おっぱい」は本当に乳房なのかが気になったので調べてみた (128,894)

【Excel】ダブルクォーテーションでデータを囲んだCSVファイルの作成方法 (127,942)