jQueryで画像やテキストを自動で切り替える

Flashを使用してアイキャッチ画像を切り替えているWebサイトをよく見ます。
でも、Flashだとソフトや知識が必要で敷居が高いですよね。
jQueryを利用して簡単に画像やテキストを自動で切り替える方法を紹介します。

jQueryお勉強第三弾です。過去の記事はこちら。

一昔前はFlashを使って実装していたことも、最近はjQueryの登場によりJavaScriptの敷居が低くなったこともあり、JavaScriptで実装することも多くなりました。そのひとつに、Webサイトのアイキャッチ画像を切り替えるということがあります。

メニューボタンをクリックして画像を切り替えることもよくある手法だと思いますが、ここでは単に自動的に画像が切り替わる方法をご紹介します。

当初、アイキャッチ画像の切り替えを想定していたのですが、一行テキストの切り替えにも使えることに気づきました。

このスクリプトを作成するにあたり、いろいろ同様のスクリプトを配布しているサイトをみていたのですが、私の頭の理解力が足らず、一週間くらい悩んでしまいました。他人様のソースコードを読むのは難しいですね><

サンプル

サンプルはこちらから

サンプルファイルのダウンロード

今回、サンプルのダウンロードファイルもご用意しました。
ダウンロード(273KB)はこちらから。

動作確認

IE6、Firefox6.0.1、Safari5.1、Google Chorme 13.0、Opera 11.50で動作確認しました。Firefoxだけ、最初の挙動は正常なのですが、途中で動作がおかしくなることがありました。原因がわからずしばらく悩んでいたんですが、jQueryのバージョンを落としたら正常に動作しました。

サンプルとはちょっと構成が違うのですが、以下、簡単な実装方法について説明します。

jQueryのダウンロード

まずは、jQueryをダウンロードします。なぜか、現在の最新バージョン1.6.2では、Firefoxで正常に動作しませんので、1.5.2以下をダウンロードしてください。

jQuery: The Write Less, Do More, JavaScript Library

HTMLの記述

HTMLはこんな感じで。

HTMLコード

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
   <meta http-equiv="Content-Script-Type" content="text/javascript" />
   <meta http-equiv="Content-Style-Type" content="text/css" />
   <title>テスト</title>
   <link rel="stylesheet" type="text/css" media="all" href="common.css" />
   <script src="js/jquery-1.6.2.min.js" type="text/javascript"></script>
   <script src="js/function.js" type="text/javascript"></script>
</head>
<body>
<ul id="sample1" class="photo">
   <li><img src="images/photo01.jpg" alt="" /></li>
   <li><img src="images/photo02.jpg" alt="" /></li>
   <li><img src="images/photo03.jpg" alt="" /></li>
   <li><img src="images/photo04.jpg" alt="" /></li>
   <li><img src="images/photo05.jpg" alt="" /></li>
</ul>
<ul id="sample2" class="text">
   <li>2011/01/01 サンプルテキストその1です。</a></li>
   <li>2011/02/02 <a href="index.html">もちろんテキストリンクもできます。</a></li>
   <li>2011/03/03 一行ニュースリリースなどに最適です。</a></li>
   <li>2011/04/04 サンプルテキストその4です。</a></li>
   <li>2011/05/05 サンプルテキストその5です。<a href="index.html">最後のテキストです。</a></li>
</ul>
</body>
</html>

自動切り替え用JavaScript

例えば、新規にfunction.jsという名前のファイルを作り、以下を記述します。

JavaScriptコード

$.fn.autoChange = function(config) {
   // オプション
   var options = $.extend({
      effect  : 'fade',
      type    : 'repaet',
      timeout : 3000,
      speed   : 1000
   }, config);

   return this.each(function() {
      // カウンター初期化
      var current = 0;
      var next = 1;

      // 指定した要素の子要素を取得
      var element = $(this).children();

      // 全ての要素を非表示にする
      $(element).hide();

      // 最初の要素だけ表示する
      $(element[0]).show();

      // 要素を切り替えるスクリプト
      var change = function(){
         // フェードしながら切り替える場合
         if (options.effect == 'fade') {
            $(element[current]).fadeOut(options.speed);
            $(element[next]).fadeIn(options.speed);

         // スライドしながら切り替える場合
         } else if  (options.effect == 'slide') {
            $(element[current]).slideUp(options.speed);
            $(element[next]).slideDown(options.speed);
         }

         // リピートする場合
         if (options.type == 'repeat') {
            if ((next + 1) < element.length) {
                current = next;
                next++;
            } else {
                current = element.length - 1;
                next = 0;
            }
         }

         // 最後の要素でストップする場合
         if (options.type == 'stop') {
            if ((next + 1) < element.length) {
                current = next;
                next++;
            } else {
                return;
            }
         }
      };

      // 設定時間毎にスクリプトを実行
      var timer = setInterval(function(){change();}, options.timeout);
   });
};


// 自動切り替えする要素の設定
$(function() {
   $('#sample1').autoChange({effect : 'fade', type : 'stop', timeout: 3000, speed : 1000});
   $('#sample2').autoChange({effect : 'fade', type : 'repeat', timeout: 3000, speed : 1000});
   $('#sample3').autoChange({effect : 'slide', type : 'repeat', timeout: 3000, speed : 1000});
   $('#sample4').autoChange({effect : 'slide', type : 'stop', timeout: 3000, speed : 1000});
});

「// 自動切り替えする要素の設定」というところで、自動切り替えする箇所を指定します。

「$('#sample1').autoChange();」と記述してあるのはsample1というidの中にある要素を自動切り替えする、という意味です。

.autoChange()の中身ですが、オプションになります。

画像が切り替わるエフェクトは、「フェード(fade)」と「スライド(slide)」の二種類あります。

JavaScriptコード

effect : 'fade'
effect : 'slide'

また、「繰り返し表示する」タイプと「繰り返しをせず、最後の要素が表示されて終わる」タイプの二種類があります。

JavaScriptコード

type : 'repeat'
type : 'stop'

あと、ひとつの要素(画像やテキスト)を表示する時間と、エフェクトにかかる時間を設定することができます。単位をミリ秒(ms)で指定します。3秒であれば3000と記述します。

エフェクトにかかる時間は、'slow'、'normal'、'fast'、というようにも設定できます。

JavaScriptコード

timeout: 3000

JavaScriptコード

speed : 1000
speed : 'slow'
speed : 'normal'
speed : 'fast'

CSS

例えば、新規にcommon.cssという名前のファイルを作り、以下を記述します。

CSSコード

#sample1 {
   width:400px;
   height:300px;
   overflow:hidden;
   position:relative;
   list-style:none;
}

#sample1 li {
   position:absolute;
}

ポイントはCSSです。JavaScriptで一度全ての要素を非表示にしているので、表示するための領域がなくなってしまいます。そのため、CSSでwidthとheightを指定して、表示する領域を確保します。

よって、幅や高さが可変になってしまうようなものはレイアウト崩れの原因になってしまうので注意が必要です。内容が可変になっても、最大の大きさを表示する領域さえ確保していれば、レイアウト崩れは防げると思います。

要素を重ねて(同位置に)表示するので、位置がずれてしまわないように、positionで調整します。

また、要素がはみ出してしまわないように「overflow:hidden;」で、はみ出した要素を非表示にします。

参考にしたサイト

投稿日:2011年9月 4日 | 編集

トラックバック歓迎です。以下URLにて登録をお願いいたします。

このエントリーのトラックバックURL:

↓↓↓トラックバックしてくださった方々↓↓↓
※トラックバックされても管理人がスパムと判断したものは公開されません。

top

ホームページ作成に役立つコーナー