スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

IDのないトラスラの枚数の増やし方の解説

 前日の投稿のトラジション・スライドは、写真が3枚であったが、写真の枚数を増やすにはJavascriptについてすこし理解しておく必要があります。
 ここでは、枚数の増やし方に限定して書いておきます。

 スライドの枚数を増やすために修正すべき箇所は、画像(img)タグの中のonclickイベントのスクリプトだけです。その中のソースをわかりやすく改行とスクリプトの説明を入れて書き換えると次のようになります。実際の利用の場合は改行と//以下の説明文は削除してください。

このスライドではalt="文字列" で指定された文字列から先頭の2文字の数字を切り取ってそれを分岐の条件で次の画像のURLに書き換えるようにしています。

その式が this.alt.substring(0,2) です。
Javascriptでは切り出された 01 という文字は、数字としても利用できますから、それを条件分岐の条件式の変数に使っています。

num=this.alt.substring(0,2); //altの文字列の先頭から2文字を切り出す
this.filters[0].apply(); //マイクロソフトフィルターの前処理 
if(num==1){  // もし最初の2文字が1ならば(Javascriptは文字と数字を区別しないで処理できます)
this.src='画像2'; // 画像のURLを書き換える
this.alt='02 写真説明2';  // altの中身を 02 と書き換える
}
else if(num==2){
this.src='画像3';
this.alt='03 写真説明3';
}
else{
this.src='画像1';
this.alt='01 写真説明1'; //ここで最初の写真に戻ります
}
this.filters[0].play(); //マイクロソフトフィルターの後処理

という風に書いていますが、
画像を4枚に増やすには、数字を増やして
else if(num==3){
this.src='画像4';
this.alt='04 写真説明4';
}
の部分をついかすればいいわけです。
この二桁の先頭のaltの数字で文字数の制限をオーバーしなければ99枚までの写真がスライドできます。

 以下5枚以上も数字を一つ増やして同様に追加すればいいわけです。

5枚ならば次をまた増やします

else if(num==4){
this.src='画像5';
this.alt='05 写真説明5';
}

altの変更は二桁の数字だけでもいいし、二桁の数字以降に写真説明を入れても構いません。



if構文の代わりにswitch文をつかうと、もっとスマートに記述できます
以下5枚の場合です

num=this.alt.substring(0,2);
this.filters[0].apply();
switch(num) { 
case 1:
this.src='画像02';
this.alt='02 写真説明02';
break;
case 2:
this.src='画像03';
this.alt='03 写真説明03';
break;
case 3:
this.src='画像04';
this.alt='04 写真説明04';
break;
case 4:
this.src='画像05';
this.alt='05 写真説明05';
break;
default:
this.src='画像01';
this.alt='01 写真説明01';
break;
}
this.filters[0].play();

コメントの投稿

非公開コメント

FC2カウンター
プロフィール

dongwcat

Author:dongwcat
FC2ブログへようこそ!

最新記事
最新コメント
最新トラックバック
カテゴリ
検索フォーム
RSSリンクの表示
リンク
ブロとも申請フォーム

この人とブロともになる

QRコード
QRコード
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。