フェードスライドショーを設置したい

2023/10/16 16:37

このQ&Aのポイント

JavaScript初心者の方が既存のホームページにスライドショーを設置したい場合の方法についてご教授ください。
希望するスライドショーの条件は、既存のページの中に設置し、自動でループすることです。また、ゆったりとした画像の切り替えを希望しています。
以下のサンプルページが希望に近い内容として見つかりましたが、フェードスライドショーに編集することは可能でしょうか？ソースコードもお教えいただけると助かります。

ベストアンサー

フェードスライドショーを設置したい

2009/08/12 21:35

JavaScript 初心者。既存のホームページにスライドショーを設置したく勉強中です。希望するスライドショートしては　・既存のページの中に設置。　・ページを開けば自動で始まり（開始等ボタンなしで）ループする。　・画像の切り替えがゆったりしたもの。まずは設置してみようとサンプル等探した中下記が希望したものに一番近く自分のホームページでも動かせたのですが http://miyakekobo.fc2web.com/photo_parts/cp_01.html フェードスライドショーに編集できますか？　もし出来るなら、よろしければソースを教えていただけますか。記述していただけるなら許す限りの解説もしていただければありがたいのですが・・・あつかましいお願いですがよろしくご教授ください。

meah1835
お礼率74% (98/132)

JavaScript
回答数7
ありがとう数6

みんなの回答 （7）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

babu_baboo
ベストアンサー率51% (268/525)

2009/08/13 07:41 回答No.1

<!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>

質問者

お礼 2009/08/13 16:47

大変勉強になりましたありがとうございました。

その他の回答 (6)

babu_baboo
ベストアンサー率51% (268/525)

2009/08/13 16:20 回答No.7

ImageChanger2('menu', 3000, 1, 0); //ul要素のid, 表示時間, 透明度の変化量, LI要素の何番目から始めると、・・・・。

質問者

お礼 2009/08/13 16:43

ですよね！記述していただいたソース解説していただいた文にらめっこしながら格闘していきます。現在、思考回路オーバーヒート間近です。本当にありがとうございました。

babu_baboo
ベストアンサー率51% (268/525)

2009/08/13 15:30 回答No.6

れいせいに、よみなおしたら、・・・・・。＞<ul id="menu"> ～ </ul>　(2)　←head 内に記述は、bodyにかくうんとちゃうの？＞<tr> ＞<script type=" ～ </script>　(3)　←body 内、表示区域に記述＞</tr> な、な、なんでそこにスクリプトが？

質問者

補足 2009/08/13 16:15

度々のご指導ありがとうございます。＞bodyにかくうんとちゃうの？＞なんでそこにスクリプトが？　そうなんですよ　<ul id=" ～を body 内に置いても表示されず困っていたのですが　※　解決いたしました　※ bodyの最上部にタイトル等を置き、それ以下に CSSで 750幅のスペースでページを作っていましたところそのスペース内では表示されなかったようです。上部の表とそれに続く下部スペースの間に <ul id=" ～を設置したところ、無事表示されました。最後にもう一つご教授ください 0jpg を最初に持ってくれば、1jpgから 1jpg を最初に持ってくれば、2jpgからとスライドショーが 2枚目の画像から始まるのですが・・・

babu_baboo
ベストアンサー率51% (268/525)

2009/08/13 14:25 回答No.5

＞「menu」と、「menu2」異なるスピードのものをご用意頂いたのですね。ひとつのかんすうで、ことなるじょうたいでもうごかせるよ！の、いみ。 <script ～> ～ </script> は、<head></head>のなかにかかないで、 </body>のちょくぜんにおくこと。

babu_baboo
ベストアンサー率51% (268/525)

2009/08/13 10:23 回答No.4

もしも、こんぱくとにしたら 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)

2009/08/13 09:51 回答No.3

ちょっとだけ、せつめいをいれて、しょうりゃくしないようにこころがけてみた。どんどん、きじゅつがながくなりそうなので、これくらいで。かんすうのなかの、かんすうが、じぶんじしんをよびだしている。そのとき、そのかんきょうが（おやもふくめて）いじされる。なので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)

2009/08/13 07:54 回答No.2

はやくもていせい！ r = function () ～を var r = function()～に

質問者

補足 2009/08/13 14:17

ありがとうございます。朝から、ここまでの回答に対し格闘してお礼が遅くなり申し訳ありません。先ほど、改めてページを開いてこれ以降の記述に気付いたしだいです。「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>　です。

フェードスライドショーを設置したい

フェードスライドショーを設置したい