- ベストアンサー
jQueryで4枚の画像をフェードアウトで切り替える方法
- jQueryを使用して4枚の画像をフェードアウトで切り替える方法について解説します。
- 画像切り替え時に選択状態を反映させる方法も紹介します。
- JavaScriptのコードにより、1枚目の画像が表示されているときに1つ目のボタンを選択状態にすることができます。
- doborn
- お礼率41% (88/210)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
どのようなＣＳＳになっているのか不明ですが、画像の順序を入替える方法を用いているようなので、ボタンの順序との照合をするのに面倒になりませんか？ 表示状態を変えるのには、スクリプトで直接対象要素のスタイルを変更するか、または、スタイルはＣＳＳで事前に定義しておいて要素のクラス設定を変えることで表示状態を変化させるなどの方法が考えられます。複雑なスタイル設定だたりすると、スクリプトでいちいち変更するのが煩雑ですし、その内容を変更したい時に毎回スクリプトを修正するのもいやでしょうから、後者の方法の方が良いのではないでしょうか。 個人的に要素の順序を入替えるのは好みで無いので、他の方法を使ってますが、参考までのサンプルに。 （おまけで、ボタンをクリックすると対応する要素が表示されるようにしてあります。） （全角空白は半角に） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>test</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <style type="text/css"> #test1 { height:100px; } div.images { position:relative; height:100%; } div.images img { position:absolute; left:0; height:100%; } div.buttons button { height:2em; width:2em; } div.buttons button.active { background-color:#c44; color:#fff; } #test2 { height:200px; margin-top:100px; } #test2 button { background-color:#fff; color:#00f; } #test2 button.active { background-color:#44c; color:#0f0; } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript"> $(function(){ var changer = function(id, speed, delay){ var intervalId, active = "active"; //ボタン自動作成 var div = $("<div class='buttons'></div>"); $(id).append(div); $(id + ' div.images img').css("opacity", 0).each(function(index){ div.append($("<button type='button'>" + (index+1) + "</button>")); }); //指定要素表示関数 var setDisplay = function(index){ $(id + ' img').stop().animate({opacity:0}, speed) .eq(index).stop().show().animate( {opacity:1}, speed); $("button", div).removeClass(active).eq(index).addClass(active); } //自動フェードイン/アウト設定 var setAutoChange = function(){ return setInterval(function(){ var b = $("button", div); var index = (b.index(b.filter("." + active)) + 1) % b.length; setDisplay(index); }, delay); } //クリック処理定義 $("button", div).click(function(){ clearInterval(intervalId); setDisplay($("button", div).index(this)); intervalId = setAutoChange(); }); setDisplay(0); //初期表示 intervalId = setAutoChange(); } changer("#test1", 1500, 4000); changer("#test2", 2000, 3000); }); </script> </head> <body> <div id="test1"> <div class="images"> <img src="./img/aaa01.jpg" alt="ホーム"> <img src="./img/bbb02.jpg" alt="ホーム"> <img src="./img/ccc03.jpg" alt="ホーム"> <img src="./img/ddd04.jpg" alt="ホーム"> </div> </div> <div id="test2"> <div class="images"> <img src="./aaaimg/01.jpg" alt=""> <img src="./bbbimg/02.jpg" alt=""> <img src="./cccimg/03.jpg" alt=""> </div> </div> </body> </html>
お礼
お礼が遅れ申し訳ございません。 実装成功いたしました、ありがとうございます！