- ベストアンサー
フェードスライドショーを設置したい
- JavaScript初心者の方が既存のホームページにスライドショーを設置したい場合の方法についてご教授ください。
- 希望するスライドショーの条件は、既存のページの中に設置し、自動でループすることです。また、ゆったりとした画像の切り替えを希望しています。
- 以下のサンプルページが希望に近い内容として見つかりましたが、フェードスライドショーに編集することは可能でしょうか？ソースコードもお教えいただけると助かります。
- meah1835
- お礼率74% (98/132)
- JavaScript
- 回答数7
- ありがとう数6
- みんなの回答 （7）
- 専門家の回答
質問者が選んだベストアンサー
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>Test</title> <style type="text/css"> #menu { width:640px; height:150px; border:1px red solid; margin:0px; padding:0px; list-style-type:none; overflow:hidden; position:relative; z-index:0; } #menu li { position:absolute; top:0px; left:0px; z-index:0; } #menu img { border:0px none; width:640px; height:150px; } #menu2 { width:640px; height:150px; border:1px red solid; margin:0px; padding:0px; list-style-type:none; overflow:hidden; position:relative; z-index:0; } #menu2 li { position:absolute; top:0px; left:0px; z-index:0; } #menu2 img { border:0px none; width:640px; height:150px; } </style> <ul id="menu"> <li><a href="htp:/test1/"><img src="./img/0.gif" alt="test1"></a></li> <li><a href="htp:/test2/"><img src="./img/1.gif" alt="test2"></a></li> <li><a href="htp:/test3/"><img src="./img/2.gif" alt="test3"></a></li> </ul> <ul id="menu2"> <li><a href="htp:/test1/"><img src="./img/0.gif" alt="test1"></a></li> <li><a href="htp:/test2/"><img src="./img/1.gif" alt="test2"></a></li> <li><a href="htp:/test3/"><img src="./img/2.gif" alt="test3"></a></li> <li><a href="htp:/test3/"><img src="./img/3.gif" alt="test3"></a></li> <li><a href="htp:/test3/"><img src="./img/4.gif" alt="test3"></a></li> </ul> <script type="text/javascript"> //@cc_on function ImageChanger2 (id, w, st, c) { var a = 0; var list = document.getElementById(id).getElementsByTagName('LI'); var S = function (n, v, z) { var s = list[ n % list.length ].style; s.zIndex = z; s./*@if(1) filter = 'Alpha(opacity=' + v + ')' @else@*/ opacity = v / 100 + '' /*@end@*/; return v >= 0; }; r = function () {setTimeout(arguments.callee, S(c, a-=st, 3) ? 30: (S(++c, a=100, 3), S(c+1, a, 1), w)); }; r(); } ImageChanger2('menu', 3000, 1, 0); ImageChanger2('menu2', 1500, 1, 0); </script>
その他の回答 (6)
- babu_baboo
- ベストアンサー率51% (268/525)
ImageChanger2('menu', 3000, 1, 0); //ul要素のid, 表示時間, 透明度の変化量, LI要素の何番目から始める と、・・・・。
お礼
ですよね！ 記述していただいたソース 解説していただいた文 にらめっこしながら格闘していきます。 現在、思考回路オーバーヒート間近です。 本当にありがとうございました。
- babu_baboo
- ベストアンサー率51% (268/525)
れいせいに、よみなおしたら、・・・・・。 ＞<ul id="menu"> ～ </ul> (2) ←head 内に記述 は、bodyにかくうんとちゃうの？ ＞<tr> ＞<script type=" ～ </script> (3) ←body 内、表示区域に記述 ＞</tr> な、な、なんでそこにスクリプトが？
補足
度々のご指導ありがとうございます。 ＞bodyにかくうんとちゃうの？ ＞なんでそこにスクリプトが？ そうなんですよ <ul id=" ～を body 内に置いても表示されず困っていたのですが ※ 解決いたしました ※ bodyの最上部にタイトル等を置き、それ以下に CSSで 750幅のスペースでページを作っていましたところ そのスペース内では表示されなかったようです。 上部の表とそれに続く下部スペースの間に <ul id=" ～を設置したところ、無事表示されました。 最後にもう一つご教授ください 0jpg を最初に持ってくれば、1jpgから 1jpg を最初に持ってくれば、2jpgからと スライドショーが 2枚目の画像から始まるのですが・・・
- babu_baboo
- ベストアンサー率51% (268/525)
＞「menu」 と、「menu2」異なるスピードのものをご用意頂いたのですね。 ひとつのかんすうで、ことなるじょうたいでもうごかせるよ！の、いみ。 <script ～> ～ </script> は、<head></head>のなかにかかないで、 </body>のちょくぜんにおくこと。
- babu_baboo
- ベストアンサー率51% (268/525)
もしも、こんぱくとにしたら function C(i,w,t,c){ var a=0,l=document.getElementById(i).getElementsByTagName('LI'); function S(n,v,z){with(l[n%l.length].style)zIndex=z,//@cc_on filter='Alpha(opacity='+v+')', opacity=v/100;return v>=0;}(function L(){setTimeout(L,S(c,a-=t,3)?30:(S(++c,a=100,3),S(c+1,a,1),w))})() } C('menu',3000,1,0); C('menu2',1500,1,0); ^^;
- babu_baboo
- ベストアンサー率51% (268/525)
ちょっとだけ、せつめいをいれて、しょうりゃくしないように こころがけてみた。 どんどん、きじゅつがながくなりそうなので、これくらいで。 かんすうのなかの、かんすうが、じぶんじしんをよびだしている。 そのとき、そのかんきょうが（おやもふくめて）いじされる。 なのでmenu2で、あらたによびだされたLOOPは、べつものになるじょ たぶん ^^; <script type="text/javascript"> //@cc_on function ImageChanger2 (id, wait, step, no) { var a = 0; //透明度 var LI = document.getElementById( id ).getElementsByTagName( 'LI' ); //対象となるLIの配列 //要素の透明度と、奥行きを設定 function setOpacity ( e, alpha, z ) { var s = e.style; if (alpha < 0) alpha = 0; s.zIndex = z; s./*@if(1) filter = 'Alpha(opacity=' + alpha + ')' @else@*/ opacity = alpha / 100 + '' /*@end@*/; return alpha > 0; }; //繰り返し実行 function LOOP () { var time, no2; a -= step; //透明にしていく if (setOpacity(LI[no], a, 3)) { //戻り値がtrueなら透明度を変化させる time = 30; } else { //false なら LIの要素を次にする a = 100; no = ++no % LI.length; setOpacity(LI[no], a, 3); no2 = (no + 1) % LI.length; setOpacity(LI[no2], a, 1); time = wait; } setTimeout(arguments.callee, time); //自分自身を呼び出す }; LOOP(); } ImageChanger2('menu', 3000, 1, 0); //ul要素のid, 表示時間, 透明度の変化量, LI要素の何番目から始める ImageChanger2('menu2', 1500, 1, 0); </script>
- babu_baboo
- ベストアンサー率51% (268/525)
はやくもていせい！ r = function () ～ を var r = function()～ に
補足
ありがとうございます。 朝から、ここまでの回答に対し格闘してお礼が遅くなり申し訳ありません。 先ほど、改めてページを開いてこれ以降の記述に気付いたしだいです。 「menu」 と、「menu2」異なるスピードのものをご用意頂いたのですね。 どちらもきれいに動きます。 ただ、 私の力不足を補っていただかなければいけないことが一点。 下記構成で、 ページ内というよりページの最上部（元のレイアウトを崩して）でしか 表示することが出来ない。 (2)を body内の任意の場所にいれてではまったく表示されないのです。 <style type="text/css"> (1) ←この間を既存の外部スタイルシートに記述 </style> <ul id="menu"> ～ </ul> (2) ←head 内に記述 <tr> <script type=" ～ </script> (3) ←body 内、表示区域に記述 </tr> 初歩的過ぎて申し訳ないのですが、正しい設置方法をご教授ください。 編集（書き換え）したのは ・スタイルシートの画像サイズ （元画像、700×250 ） ・画像にかかったリンク及び画像へのパス （<li><img src="0.jpg" alt="test1"></li> です。
お礼
大変勉強になりました ありがとうございました。