【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
-ギャラリー, パラパラマンガ, 画像切替

: 【JS】jQueryでAタグ（リンク）を無効化する方法

jQueryを使い、Aタグ（リンク）を無効にするスクリプトを作成したのですが、ちょくちょく出てくるたびに調べるか自分で書いた過去ネタを探しに行っているので、備忘録としてポストします。

: 【JS】jQueryでリストタグ（<li>）のテキストを取得する方法

リストタグに設定されているテキストを取得するjQueryのスクリプトです。絶対にまた調べることになると思うのでその部分だけを忘備録として書いておきます。

: lightbox系プラグイン「Shadowbox.js」で、YouTube動画をオプション付きで埋め込む方法。

プラットフォーム関係なく動画を再生させたかったので、YouTubeにアップして見せることになり、その際に利用したlightbox系のプラグイン「Shadowbox.js」の使い方を忘備録としてポストします。

: 【JS】チェックボックスでフォームの disabled を設定/解除するスクリプトをjQueryで組んでみた

チェックボックスでフォームのdisabledを制御するjQueryのスクリプトを作成したので忘備録としてポストします。

: 【jQuery】スマートフォン（iPhone, Androidなど）とPCを判定するスクリプト

サイトへのアクセス時に「スマートフォン(iPhine/Android)」と「PC」で処理を切り替えたい場合のjQueryスクリプトです。

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

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

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

デモ

スクリプト

HTML

Javascript

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

デモ

スクリプト

HTML

Javascript

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

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

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

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

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

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