スポンサーサイト

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

スライドショーの作り方 その4 AUTOスライドショー 音楽つき

 スライドショーのまとめです。今回は制御ボタンを使って自動スライドショーを作ってみました。
 基本は第三回のクリックによるスライドショーですが、再生ボタンのクリックイベントで、画像クリックと同じスクリプトによる画像変更をタイマーインターバルの処理スクリプトに入れてみました。

 スクリプトは画像もタイマーのほうも全く同じものですが、タイマー内部は、画像のURLソースのところのシングルクォーテーションのかっこが入れ子になりますので、タイマーのところは ' を ¥' と記述しています。

 タイマールーチンは次のように書きます

timerID=setInterval('{ ここにスクリプトを入れる }',3000);


 再生ボタンで自動再生開始、ポーズボタンで再生一時停止、停止ボタンで、自動再生停止とリセット、となります。

ソースは以下の通りです

<center>
<span style="font-size:1px;color:white;
">
<<div id="数値のID" width=1 height=1></div>
<<img id="画像のID" src="最初の画像URL" style="filter:progid:DXImageTransform.Microsoft.Slide(slideStyle='SWAP', bands=1);
" onclick="画像のID.filters[0].apply();
if(数値のID.width==1){画像のID.src='画像1URL';
数値のID.width=2}else if(数値のID.width==2){画像のID.src='画像2URL';
数値のID.width=3}else if(数値のID.width==3){画像のID.src='画像3URL';
数値のID.width=4}else if(数値のID.width==4){画像のID.src='画像4URL';
数値のID.width=5}else if(数値のID.width==5){画像のID.src='画像5URL';
数値のID.width=6}else if(数値のID.width==6){画像のID.src='画像6URL';
数値のID.width=7}else if(数値のID.width==7){画像のID.src='画像7URL';
数値のID.width=8}else {画像のID.src='画像8URL';
数値のID.width=1}画像のID.filters[0].play();"/>
<br />
<br />
<<img src="再生ボタンURL" onclick="if(数値のID.height==1){slidetimer=setInterval('{画像のID.filters[0].apply();
if(数値のID.width==1){画像のID.src='画像1URL';
数値のID.width=2}else if(数値のID.width==2){画像のID.src='画像2URL';
数値のID.width=3}else if(数値のID.width==3){画像のID.src='画像3URL';
数値のID.width=4}else if(数値のID.width==4){画像のID.src='画像4URL';
数値のID.width=5}else if(数値のID.width==5){画像のID.src='画像5URL';
数値のID.width=6}else if(数値のID.width==6){画像のID.src='画像6URL';
数値のID.width=7}else if(数値のID.width==7){画像のID.src='画像7URL';
数値のID.width=8}else {画像のID.src='画像8URL';
数値のID.width=1}画像のID.filters[0].play();}',3000);
数値のID.height=2;}"/>
<<img src="ポーズボタンURL" onclick="clearInterval(slidetimer);数値のID.height=1"/>
<<img src="停止ボタンURL" onclick="clearInterval(slidetimer); 画像のID.filters[0].apply();画像のID.src='最初の画像URL';画像のID.filters[0].play();数値のID.width=1;数値のID.height=1;"/>
</span>
</center>
<<
<
<<<


再生ボタンで自動再生開始、ポーズボタンで再生一時停止、
停止ボタンで、自動再生停止とリセット



コメントの投稿

非公開コメント

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

dongwcat

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

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

この人とブロともになる

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