解決済
ブログ記事内での画像スライドショー表示
上記質問にて画像のランダム表示はできたのですが
その状態で画像をスライドショー表示する方法は
どう記述すればいいのでしょうか？
色々と検索してチャレンジしましたが上手くいきません。
よろしくお願いいたします。
回答(2)
2.
<img id="random_img" src="nothing.jpg" alt=""><br /><!-- nothing.jpg は、ダミー：存在しない --> <script type="text/javascript"><!-- var img_list = [ //画像のリスト "01.jpg", "02.jpg", "03.jpg", "04.jpg" ];
function SlideShow(id, list, interval){
this.time_id = null;
this.interval = interval;
this.element = document.getElementById(id);
this.image_list = list;
this.index = Math.floor(Math.random()*(list.length));//最初の画像はランダム
var self=this;
this.next = function(){
self.index++;
if(self.index == self.image_list.length) self.index = 0;
self.element.src=self.image_list[self.index];
};
}
SlideShow.prototype.start =function(){
this.element.src=this.image_list[this.index];
if(this.image_list.length)
this.time_id=setInterval(this.next, this.interval * 1000);
};
SlideShow.prototype.stop = function(){
clearInterval(this.time_id);
};
var ss1 = new SlideShow('random_img', img_list, 3);//random_img に img_list の画像を３秒ごと表示する
ss1.start();
//-->
</script>
スライドショー表示できました。
本当にいつもありがとうございます。
1.
ちょっと趣旨がずれるかもしれませんが
フォト蔵 に登録して
アルバムを作って画像をアップロードしておき、
そのアルバムをスライドショーで表示させる
という方法が簡単ですよ
ブログのエディタはシンプルエディタにしておきましょうね
フォト蔵は知りませんでした。
いろいろと使い道がありそうですね。
教えてくださりありがとうございます。
コメント(10)
スライドショーってどれくらいの機能のものを想定されているのでしょうか？
・＜，＞ボタンを押すと前後の画像が表示される
・自動的に、一定時間が来たら次の画像が表示される。
・さまざまな表示効果をともなって次の画像が表示される
・画像のサイズは、用意したサイズの範囲で収まる
・画像のサイズは、それぞれの画像サイズになる
・最終画像に来たら止まる。
・最終画像に来たら最初の画面に戻る。
ランダム表示との関係はどういう関係？
・ランダム表示で自動的に時間で画像が変わる。
・ボタンを押すと次の画像もランダムで選ばれて表示される
・最初ランダムで表示し、以降巡回的に表示する。
BLUEPIXYさん すみません説明不足でしたね。
ボタンなどは一切なく画像サイズは用意しているサイズで収まります。
３秒後に画像が自動的に次の画像になり最後の画像にきたら最初の画像に戻る。
ランダム表示で設定した画像を自動的に３秒後に切り替わるようにできたら・・・と思ったのです。
表示効果的には じわ～っと画像が切り替わるような…
すみません上手く説明できなくて。
#3>表示効果的には じわ～っと画像が切り替わるような…
Silverlight を使ってやってみようかな、とか、ちょっと考えてみましたが、
(ＩＥならfilterを使えばいけるのかなとか)
そのためには、Silverlight をインストールする必要（見せる側・見る側）がありますし、
無料版の場合、スクリプトファイルの置場にもなかなか困るかも・
回答２のようである必要もないのかなと思ったけど、個別記事それぞれに書いてそれがトップページに表示されるような運用もあるのかなと思ってそのようにしてみました。
そのように複数の部分で使われるなら、
２個目のブロックの先頭から
var ss1 の前の行までは、
テンプレートの<head>～</head>に書いた(外に括り出す)方がいいかもしれません。
BLUEPIXYさんいつもありがとうございます。
この記述の下に記事を書こうと思った場合は
他にいろいろと記述しないと駄目なのでしょうか？
追記部分に記事を書きたいと思ったのですが・・・
他に記述が必要なら画像のみ別記事にしようかと思っています。
BLUEPIXYさんにおんぶにだっこ状態で申し訳なくってヾ(;´▽｀A
#7>この記述の下に記事を書こうと思った場合は他にいろいろと記述しないと駄目なのでしょうか？
<br> してるし、
別にそのまま書けばいいです。
回り込みするとかいうことですか？
<br clear="all">
してから、文字を書くとか・
#9>何故でしょう？
できたら、ブログのアドレス（その記事のアドレス）を教えていただけますか？
BLUEPIXYさん
ちゃんと表示されました。
できなかったのは私の記述に間違いがあったのかも知れません。
何度も本当にありがとうございました。
