jQueryで4枚の画像がフェードアウトで切り替え

解決済

質問者：doborn
質問日時：2013/05/07 13:10
回答数：1件

4枚の画像をフェードアウトで切り替えるものをjQueryのサイトを参考に作成しました。

そこで、その右側に4つのボタンのようなものを配置し、
1枚目の画像が表示されているときは1つめのボタンが
2枚目の画像が表示されているときには2つめのボタンが
選択されたような状態になり、
「現在表示されている画像はこのボタンのものです」というようなものを実行したいです。

途中まで、作業は進んでおり、

■javaScript
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5. …
<script type="text/javascript">
$(function(){
var setImg = '#contentsleft';
var fadeSpeed = 1500;
var switchDelay = 4000;
$(setImg).children('img').css({opacity:'0'});
$(setImg + ' img:first').stop().animate({opacity:'1',zIndex:'20'},fadeSpeed);
setInterval(function(){
$(setImg + ' :first-child').animate({opacity:'0'},fadeSpeed).next('img').animate({opacity:'1'},fadeSpeed).end().appendTo(setImg);
},switchDelay);
});

■HTML
<div id="contentsleft">
<img src="./imgs/aaa01.jpg" alt="ホーム">
<img src="./imgs/bbb02.jpg" alt="ホーム">
<img src="./imgs/ccc03.jpg" alt="ホーム">
<img src="./imgs/ddd04.jpg" alt="ホーム">
</div>

<button id="btn01">１</button>
<button id="btn02">２</button>
<button id="btn03">３</button>
<button id="btn04">４</button>

となっています。

javaScriptのところで、1枚目が表示されているときに1つめのボタンを選択状態にする。
というような処理を施せばよいのでしょうが、知識不足でお手上げ状態です。

ご教授いただければと思います。
よろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： fujillin
回答日時：2013/05/08 09:03

どのようなＣＳＳになっているのか不明ですが、画像の順序を入替える方法を用いているようなので、ボタンの順序との照合をするのに面倒になりませんか？

表示状態を変えるのには、スクリプトで直接対象要素のスタイルを変更するか、または、スタイルはＣＳＳで事前に定義しておいて要素のクラス設定を変えることで表示状態を変化させるなどの方法が考えられます。複雑なスタイル設定だたりすると、スクリプトでいちいち変更するのが煩雑ですし、その内容を変更したい時に毎回スクリプトを修正するのもいやでしょうから、後者の方法の方が良いのではないでしょうか。

個人的に要素の順序を入替えるのは好みで無いので、他の方法を使ってますが、参考までのサンプルに。
（おまけで、ボタンをクリックすると対応する要素が表示されるようにしてあります。）

（全角空白は半角に）
<!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. …

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