【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 ClockPick」を使ってみる。

時刻を入力させるフォーム、プルダウンで作っても良かったのですが、ちょっとオシャレ(？)にjQueryの入力補助ライブラリ「ClockPick」を使ってみました。

: スマホアプリでよく見る横から出てくるスライドメニューを実装できるjQueryのプラグイン「Sidr」。

スマホ向けサイトを作成の際、メニューをスマホアプリのように横から出したくなり探しました所、「Sidr」というプラグインを発見。

: 【JS】ラジオボタンの選択値によってテーブルの内容を変更するスクリプトをjQueryで作成する

ラジオボタンの選択値によって指定したテーブルのTRタグ（無論DIVでも）の表示・非表示を変更し、内容を操作するJavascript（jQuery）の紹介です。

: 【JS】jQuery / jQuery UI の読込みを Google の Libraries サイト(CDN)から参照する方法

jQuery 及び jQuery UI をCDNから参照する方法を、ほぼ自分用のメモとしてポストします。

: jQueryで各国通貨を日本円にするコンバーターを作ってみた。

APIで利用できる通貨をセレクトボックスで選択し、日本円に換算するというスクリプトを作ってみました

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

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

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

デモ

スクリプト

HTML

Javascript

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

デモ

スクリプト

HTML

Javascript

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

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

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

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

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

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