【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を使って変更してみる　その２

以前ポストした選択したラジオボタンの背景色を変更するスクリプトを少し改造し、多数のラジオボタンを対象とするスクリプトを作成したので、備忘録としてポストします。

: jQueryでロールオーバーのスクリプトを組んでみた

jQueryの勉強として、マウスカーソルが乗った時にアニメーション（フェードイン、フェードアウト）しながら切り替わる「ふんわりロールオーバープラグイン」を作成してみました。

: クリックされたらツールチップを表示するスクリプトをjQueryで組んでみた

今回はリンクをクリックされると表示するツールチップのスクリプトを組んでみました。フォーム入力する際のヘルプなどの表示を主な用途と考えていますが、使いどころはほかにもありそうな予感。基本的なものなので、改造は簡単にできそうですしね。

: 【JS】jQueryとCSSで作る「ハンバーガーメニュー」を少しリニューアルしてみました

以前作成したjQueryとCSSで作る「ハンバーガーメニュー」に少し手を入れて、もうちょっとだけ使えるものにしてみましたのでご紹介したいと思います。

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

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

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

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

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

デモ

スクリプト

HTML

Javascript

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

デモ

スクリプト

HTML

Javascript

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

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

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

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

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

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