- ベストアンサー
jqueryで画像切り替え
- jqueryを使用してサムネイル画像のマウスオーバーでメイン画像が切り替わる機能を作成し、自動切り替えとマウスオーバー時の切り替えを制御したい。
- HTMLとCSS、Javascriptのコードを記載しており、画像の表示や切り替えに関する設定が行われている。
- 現在はサムネイル画像のマウスオーバーでメイン画像が切り替わる機能が実装されているが、自動切り替えとマウスオーバー時の切り替え制御ができていない。
- yukiponta
- お礼率52% (66/125)
- JavaScript
- 回答数1
- ありがとう数5
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
回答がないみたいですが・・・ こんな感じではどうでしょうか？ 表示中のものをどこかに記憶しておくほうが簡単なので、class="active"のものが表示中ということにしています。 （全角空白は半角に） $(function(){ var photo = $('#photo li'); var active = "active", intervalId, interval = 5000; var changeStart = function(){ intervalId = setInterval(function(){ var act = photo.filter("."+active).removeClass(active).stop().fadeTo('fast', 0).next(); (act.length?act:photo.filter(":first-child")).addClass(active).stop().fadeTo('fast', 1); }, interval); } $("#thumb li").hover( function(){ clearInterval(intervalId); photo.stop().removeClass(active).fadeTo('fast', 0) .eq($(this).index()).stop().addClass(active).fadeTo('fast', 1); }, function(){ changeStart(); } ); photo.hide().eq(0).addClass("active").show(); changeStart(); });
お礼
本当にありがとうございました。 こんなにもスマートに書く方法があるとは思いませんでした。 またactiveを使用する方法は知らなかったので非常に勉強になりました。 本当にどうもありがとうございました。