jQuery を使って表示する画像を setInterval を使って切り替える

公開日: : 最終更新日:2014/02/11 JavaScript , ,

画面に表示する画像を一定期間で切り替えるスニペットです。

スライドショー的なプラグインで済ますこともできますが、こんな風に実装することで同じようなことができます。

icatch-switch_mini

photo credit: Andrew Huff via photopin cc

目次

1. 使用したライブラリ

使用したライブラリと、そのバージョンは次の通りです。

1-1. jQuery

jQuery はセレクタだけに使用しています。

このサンプルに jQuery は必須ではないのですが、もう慣れてしまったので jQuery がないと面倒くさい。。。

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

2. ソースコード

以下は、作成したソースコードについてになります。

2-1. ファイル構成

作成したファイルは次の3本です。

  • index.html
  • js/script.js
$ ls -R
.:
img  index.html  js

./img:
image01.jpg  image02.jpg

./js:
script.js

2-2. index.html

まずは index.html です。

ここには JavaScript の参照定義と、属性を何も定義していない img タグがあるだけです。

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset=utf8>
        <title></title>
    </head>
    <body>
        <img src="">
        
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
        <script type="text/javascript" src="./js/script.js" charset="utf8"></script>
    </body>
</html>

この img タグに設定する画像を切り替えます。

2-3. js/script.js

このファイルで画像の切り替えを実装しています。

コードを見れば何をやっているかは想像付くと思いますが、次のことをやっています。

  1. 画像を切り替えるインターバルを 1000 ミリ秒と定義
  2. img タグを取得し、2枚の画像を切り替えるフラグを初期化
  3. 次を 1000 ミリ秒間隔でループする
    • フラグが true なら “./img/image01.jpg” を src 属性に設定
    • フラグが false なら “./img/image02.jpg” を src 属性に設定
$(function() {
    var switchInterval = 1000;
    var img = $('img');
    var flag = true;

    var interval = setInterval(function() {
        if(flag) {
            img.attr('src', './img/image01.jpg');
        } else {
            img.attr('src', './img/image02.jpg');
        }
        flag = !flag;
    }, switchInterval);
});

3. サンプル

このサンプルプログラムは、次の場所に公開してあります。

4. まとめ

スライドショー系のプラグインでも同じことは出来ちゃうので、あまり需要がないかもしれませんが。。。

5. プログラムを Github に登録しました

今回の記事で使用したサンプルプログラムを Github に登録しました。

よかったら参考にしてみてください。

6. その他の JavaScript に関する記事

その他の JavaScript に関する記事は次の通りです。
気になる記事があったらぜひチェックしてみてください!

Googleアドセンス用(PC)

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

関連記事

icatch-checkbox-147904_640

jQuery を使ってチェックボックスのチェックを付けたり外したりするコードスニペット

jQuery を使ってチェックボックスの ON/OFF を操作する方法ですが、以前実装したときのコー

記事を読む

icatch-browser_3376956889_mini-thumbnail

GoogleMap サンプルのプロジェクトに Grunt の LiveReload を有効にする設定を追加しました

ウチのブログで公開している GoogleMaps API を使った GoogleMap のサンプルプ

記事を読む

icatch-checklist_4439276478_mini-thumbnail

BootstrapValidator の基本的なバリデーションを試すサンプルを作成しました

TwitterBootstrap3 用のバリデーションチェックプラグイン BootstrapVali

記事を読む

icatch-automatic_2714993937_mini-thumbnail

Grunt + QUnit + PhantomJS でテストを自動実行してくれる環境を構築する

先日投稿した GoogleMap サンプルのプロジェクトに Grunt の LiveReload を

記事を読む

icatch-drill_mini

Underscore.js の template を使ってドリルダウンを実装するスニペット

先日、Underscore.js の template と each を使って JSON から se

記事を読む

icatch-googlemap_3384995399_mini-thumbnail

GoogleMap を使って住所から緯度・経度を計算する

先日も GoogleMpa のジオコーディングを使った地図を表示するメモをアップしましたが、今回も

記事を読む

icatch-twins_7039449789_mini

Underscore.js の template を使うときは HTML にテンプレートを書こう

Underscore.js の template メソッドを使った select タグ生成についての

記事を読む

Head in Hands

JSON をオブジェクトに変換するときに注意したいこと

おそらくですが、これから書く内容は常識なんだと思います。 が、その常識を知らなかったためにかなりの

記事を読む

icatch-where

jQuery を使ってファイルアップロードフォームのファイルが選択されているかを確認する方法

HTML に設置したファイルアップロードフォームにファイルが選択されているかを確認する方法を調べまし

記事を読む

icatch-painting_mini

jQuery を使ってタグに設定されているクラスをすべて取り除いた後に指定のクラスに変更する

jQuery を使ってタグに設定されているすべてのクラスを取り除いた後に指定のクラスを設定する方法で

記事を読む

Googleアドセンス用(PC)

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


一 × = 8

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Googleアドセンス用(PC)

icatch-jersey_multi_pathparams
Jerseyの@PathParamはスラッシュの間に複数指定できる

http://hoge-api/user/{id}.{format}

icatch-vagrant_box_customize
VagrantのBoxファイルをカスタマイズして独自のBoxファイルを作成する

配布されている Vagrant の Box ファイルを使って検証環境を

icatch-2015-006-1
バリデーションチェックにJava8のOptionalを使ってスマートに書く(自分比)

Web アプリのバリデーションチェックにアノテーションを使うことが増え

icatch-2015-005-1
ユニットテストの偏りを防ぐ命名規則の付け方

ユニットテスト名に以下の命名規則を付けるようにして二ヶ月ぐらい経った。

icatch-2015-004-1
Vagrantで起動したCentOS上のOctopressをホストOSから確認する設定

タイトルの通りだが、Vagrant を使って起動した CentOS に

→もっと見る

PAGE TOP ↑