気の向くままに辿るIT/ICT/IoT

JavaScript

画像のスクロール ECMAScript/JavaScript

画像をスクロールさせたい！『JavaScript編』

画像のスクロール ECMAScript/JavaScript

任意画像の自動スクロール例

　JavaScriptを使うとホームページ上で文字や画像を縦や横にスクロールさせることもでき、この基本と言うべきか、応用というべきか、スクロールだけでなく画像や文章が入れ替わるアニメーションのような表現もできます。

　ここでは、画像をスクロールさせる方法について記しますが、これを使うと例えば、サンプル画像にあるサイトのように任意の『画像自動スライド』や『ページ掲載ショップバナーの自動スライド』として画像を自動的にスクロールさせるといった使い方もできます。

　尚、サンプルサイトでは、前者は、1枚ずつ、後者は、複数の画像を一連の流れで自動的にスクロールさせています。

　サンプルのサイトもそうですが、後者のようなケースでは、例えば、1件しかないのにスクロールさせるのは微妙なのでページ掲載数に応じてバナーを自動スクロールさせるか(表示)させないかを設定するとよいでしょう。

JavaScriptで画像をスクロールさせる方法

　設定の仕方には、複数の方法がありますが、任意の『画像自動スライド』例では、JavaScriptのプログラムをHTMLファイルのheadタグ内に直接記述、『ページ掲載ショップバナーの自動スライド』では、外部ファイルとして作成しています。

　ここでは、前者の任意の『画像自動スライド』の例について記しますが、後者の仕組みも前者を参考に応用すればできるでしょう。

『画像自動スライド』例におけるHTMLページの設定

　自動スクロールさせるページに直接JavaScriptを記述してもよいですが、iframeを使ってスライド用のページを用意するのもよいでしょう。

　例えば、同じディレクトリにあるslide.htmlをiframeのソースとして表示幅を外側のdivタグで高さをiframeタグ内のstyle指定で設定すると以下のようになります。

</div>

　後は、slide.html内にJavaScriptでコーディングしますが、全体としては以下のようになります。

<-- slide.html -->

<html>

<head>

<title>slide</title>

<!--

var imgs = [new Image(),new Image(),new Image()];

imgs[0].src = "sample1.png";

imgs[1].src = "sample2.jpg";

imgs[2].src = "sample3.tif";

var img_start_pos = 240;

var img_end_pos = -360;

var img_left = img_start_pos;

var img_top = 0;

var move_amount = 2;

var move_speed = 40;

var src_cnt = 0;

function move_image(){

document.getElementById("img1").style.top = img_top + "px";

document.getElementById("img1").style.left = img_left + "px";

if(img_end_pos-img_start_pos > 0){

img_left += move_amount;

if(img_left > img_end_pos){

img_left = img_start_pos;

subfunc();

}

}else{

img_left -= move_amount;

if(img_left < img_end_pos){

img_left = img_start_pos;

subfunc();

}

document.getElementById("img1").style.visibility="visible";

document.getElementById("img1").style.position="relative";

document.getElementById("img1").style.width="200px";

document.getElementById("img1").style.height="100px";

document.getElementById("img1").style.zindex="3";

setTimeout("move_image()",move_speed);

}

function subfunc()

{

if(document.getElementById("img1").src == imgs[imgs.length-1].src){

src_cnt = 0;

}else{

src_cnt = src_cnt+1;

}

document.getElementById("img1").src = imgs[src_cnt].src;

}

//-->

</script>

</head>

<div>

</div>

</body>

</html>

　今回、JavaScriptは、headタグ内に書くものとしますが、まず、JavaScriptソース以外の部分は、例えば、このようになります。

<-- HTML部分 -->

<html>

<head>

<title>slide</title>

<!--

// JavaScriptソース

//-->

</script>

</head>

<div>

</div>

</body>

</html>

　bodyタグでイベントハンドラonLoadを使ってJavaScriptのメソッドをコール、imgタグにid="img1"のようにIDを付け、JavaScriptからもこのIDを使って操作できるようにし、便宜的にデフォルトで表示する画像ソースファイルを指定しつつ、スタイル設定でvisibility:hiddenとして非表示にしておき、サイズ等、そのほかは、必要に応じて適宜設定します。

　今回、JavaScriptのソースからは、このIDのみを頼りにimgタグのsrc属性を設定、デフォルトの画像ファイルを非表示にしているのは、この場合、そうしておかないとスクロールが始まる前から画像がポツンと表示されてしまうからです。

　JavaScriptソース部分は、以下のようになります。

<-- JavaScriptソース -->

var imgs = [new Image(),new Image(),new Image()];

imgs[0].src = "sample1.png";

imgs[1].src = "sample2.jpg";

imgs[2].src = "sample3.tif";

var img_start_pos = 240;

var img_end_pos = -360;

var img_left = img_start_pos;

var img_top = 0;

var move_amount = 2;

var move_speed = 40;

var src_cnt = 0;

function move_image(){

document.getElementById("img1").style.top = img_top + "px";

document.getElementById("img1").style.left = img_left + "px";

if(img_end_pos-img_start_pos > 0){

img_left += move_amount;

if(img_left > img_end_pos){

img_left = img_start_pos;

subfunc();

}

}else{

img_left -= move_amount;

if(img_left < img_end_pos){

img_left = img_start_pos;

subfunc();

}

document.getElementById("img1").style.visibility="visible";

document.getElementById("img1").style.position="relative";

document.getElementById("img1").style.width="200px";

document.getElementById("img1").style.height="100px";

document.getElementById("img1").style.zindex="3";

setTimeout("move_image()",move_speed);

}

function subfunc()

{

if(document.getElementById("img1").src == imgs[imgs.length-1].src){

src_cnt = 0;

}else{

src_cnt = src_cnt+1;

}

document.getElementById("img1").src = imgs[src_cnt].src;

}

　表示する複数枚の画像を枚数分、newを使って作成したImageオブジェクトのインスタンスをリスト(配列)として用意し、インスタンスのsrcプロパティに画像ファイルを設定します。

　固定値及び既定値としてスライドの開始位置と終了位置(左右に移動するので左位置と右位置)、上からの位置、開始位置との差分距離(実際の移動距離)と移動距離(見た目上はスピード)、画像リストの添え字となるカウンタの数値を変数に格納しておきます。

　HTMLファイル及びタイマー設定時にコールされる主たるメソッド[例では、move_image()]を作成し、idオブジェクトを取得するgetElementById()メソッドにHTMLファイル内の特定のid属性の設定値(例ではimg1)を指定、styleプロパティで設定可能な各種プロパティの内、スライド画像の開始位置の上位置と左位置を設定します。

　計算上、数値として扱うことから初期値に単位を付加していないのでプロパティとして設定する際は、適宜、文字列連結で単位を付け足すのを忘れないようにします。

　実は、既定値として使うimg_start_pos(開始位置)とimg_end_pos(終了位置)は、変数名として必ずしも妥当とは言えず、見た目上それらしく見せる為には、開始位置が正(プラス)の値で終了位置が負(マイナス)の値であれば、右から左へ、逆なら左から右へと画像がスクロールします。

　これを踏まえて移動する方向別にif-else文で分岐、開始位置との差分距離をそれぞれ加算、または、減算しています。

　その後、getElementById()メソッドのstyleプロパティで設定可能なスライド開始位置以外の各種プロパティを設定します。

　最後にエンドレスで繰り返しスクロールするようにsetTimeout()メソッドを使い、同時に移動距離(見た目上のスピード)を設定します。

　尚、実際の画像の入れ替えは、subfunc()メソッドで行っており、配列の添え字が最大になった時に0に戻すことでエンドレスでスクロールします。

　これを応用すれば、画像の上下スクロールや画像を複数並べつつスクロールするスクリプトを書くことができます。