クリックでフェードアウト～フェードイン

こちらが俺が読んだSS様に提供したヘッダ画像切り替えのサンプルです。
クリックでフェードイン・フェードアウトして切り替わります。 しかし前の記事でも言ったように、これだとトップページへのリンクが貼れないんですね。
いや貼れはするんですが、トップページに戻ると画像も一枚目に戻ってしまい、永遠に一枚目しか表示されないという…
HTML は、表示枠のID以外は前記事に掲載したものと全く同じです。
今回は二箇所に掲載するので frame-js1,frame-js2 と、IDを二つ用意しました。
このIDを引き数にして、JavaScript に仕事をしてもらうわけです。

$(function(){
    $('#frame-js1 div').click(function(){
        $(this).fadeOut(400, function(){
            $(this).next('div').fadeIn(300);
            $('#frame-js1').append(this);
        });
    });
});

これを和訳すると、

    frame-js1という id を持つ要素の子要素 div がクリックされた時{
        これを0.4秒かけてフェードアウトさせ、この時{
            この次の子要素 div を0.3秒かけてフェードインさせ、
            これを frame-js1 の最後に書き加えよ。
        }
    }

という感じでしょうか。
表示の終わったものをHTMLオブジェクトの後ろに回していくということ。
ちなみに、これ(this)というのは最初にクリックされた要素を指しています。直訳するとなんかおかしいですけど。
あと、jQuery の function()が出てきたら「～の時」と読み替えると結構わかりやすいです。
なお、このコードの出典が今現在分からなくなっているので、何卒ご了承ください。
なんかいろんなブラウザにいろんなブクマが無秩序に貼ってあって、見つからないのですよ…
判明次第ここに追記します。御免なさい

クロスフェード

こちらがNSのおススメです。
HTMLの画像を増減してもスタイルシートを設定し直す必要が無く、ただ下の JSコードを実装するだけ。
何よりクロスフェードするのがカッコいいですし！

今日のパクり元参考サイト様→A Simple jQuery Slideshow by Jon Raasch

HTMLはコチラ↓

<div class="stage">
  <div id="frame-js2">
    <div class="active"><img src="画像1のURL" width="100%" /></div>
    <div><img src="画像2のURL" width="100%" /></div>
    <div><img src="画像3のURL" width="100%" /></div>
    <div><img src="画像4のURL" width="100%" /></div>
    <div><img src="画像5のURL" width="100%" /></div>
  </div>
</div>

外枠の stageという divタグはこのブログの記事用に使っているだけなので、デザインし直しても、外しても構いません。
また、オリジナルでは img要素は frame-js2の直下に記述されていますが、前記事同様に拡張を考慮し、それぞれ子div で囲んでいます。
さて、ここで最初に表示させたい画像を囲んでいる div にだけ、active というクラス名を与えます。
これが無いと一瞬画像が表示されません。

CSSスタイルシートはコチラ↓

.stage {
    width: 570px; height: 190px;
    margin: 1em auto;
    border-radius: 0.5em;
}

div#frame-js1, div#frame-js2 {
    width: 570px; height: 190px;
    position: relative;
    overflow: hidden;
    border-radius: 0.5em;
    background: url(背景画像のＵＲＬ) repeat; /* class="active"を設定していれば不要 */
}

#frame-js1 div {
    width: 570px; height: 190px;
}
#frame-js2 div {
    width: 570px; height: 190px;
    position: absolute;
    z-index: 8;
    opacity: 0.0;
}
#frame-js2 div.active {
    z-index: 10;
    opacity: 1.0;
}
#frame-js2 div.last-active {
    z-index: 9;
}

ついでに frame-js1 の分もまとめて載せておきました。
こちら frame-js2 のポイントは、子要素 div の中で z-index というプロパティを使い、昨日の記事でどうにもならないと書いた、画像の上下関係を定義していることです。
画面上の横軸がx軸、縦軸がy軸なら、画面からあなたに向かっている座標軸がz軸であると言えます。
x,y と違って単位はなく、序数のようなもので、この値が高いほど手前に表示されるというイメージでしょうか。
この重なり順と不透明度(opacity)を利用してクロスフェードを実現しているコードを見てみませう。

JSコードはコチラ↓

＊先述の理由により、オリジナルで img となっている部分を div に変えています

function slideSwitch(　switchingTime　){
    var $active = $('#frame-js2 div.active');
    if($active.length == 0) $active = $('#frame-js2 div:last');
    var $next = $active.next().length ?
        　　　　　　　$active.next(): $('#frame-js2 div:first');
    $active.addClass('last-active');
    $next.css({opacity: 0.0}).addClass('active')
         .animate({opacity: 1.0}, switchingTime, 
             function(){
                 $active.removeClass('active last-active');
             });
}
$(function() {setInterval( "slideSwitch(1500)", 6000 );});

1行目から12行目で slideSwitch という関数を定義し、13行目でこれを実行しています。
まず1行目。

function slideSwitch(){

これから関数 slideSwitchを定義しますよーという書き出しです。
次に2,3行目。

    var $active = $('#frame-js2 div.active');
    if($active.length == 0) $active = $('#frame-js2 div:last');

2行目で、$active という変数に、#frame-js2 div.active(現在表示中の画像)というHTMLオブジェクトを格納します。が、HTML の方にうっかり class="active" を書くのを忘れてしまった場合にはどうするか？
そのエラー回避のために、3行目で $active.length を求めます。length は数値ならビット数、文字列なら長さ、配列ならデータ数を返しますが、オブジェクトの length って何でしょうね…？
ともかくこの値が 0 なら、オブジェクトが存在しないという判断になるようです。その時はとりあえず #frame-js2 div:last(ここでは5枚目の画像)を $active に格納します。

    var $next = $active.next().length ?
        　　　　　　　$active.next(): $('#frame-js2 div:first');

ここは上の $active を $next に、div:last を div:first に変えているだけで、やっていることはだいたい同じ。書き方が違ってるだけです。なんで変えてあるんですかね…
まず $active の次の画像を next() で取得し、length が 0、即ち次が無い最後の画像なら $next には div:first(一枚目の画像)を格納しなさい、ということですね。

    $active.addClass('last-active');

ここで $active に'last-active'というクラスが与えられ、上のスタイルシートの z-index:9; が適用されます。
プロパティそのものをいじるのではなく、クラス指定することでCSSの定義を適用させる、スマートなやり方だと思います。ここを理解した時、ちょっと感動しました。

    $next.css({opacity: 0.0}).addClass('active')
         .animate({opacity: 1.0}, 1500, 
             function(){
                 $active.removeClass('active last-active');
             });

表示の都合で何行かに分けましたが、これで一行です(笑)。
$next の CSSプロパティ、不透明度(opacity)を 0.0 から 1.0 に、1.5秒(1500msec)かけて、連続的に切り替える(animate)指定がされています。
面白いのはその切り替えている間に addClass というメソッドが挿入されていることです。こういう書き方もできるのかとびっくりしました。
ここで $next に active というクラスが与えられ、z-index が10に上がり、この画像が一番上に来る＝表示されます。今まで表示されていた $active は z-index:9 なので、opacity が変化して徐々に見えてくる $next の下に隠れます。
そして表示が切り替わったタイミングで $active は二つのクラスを剝奪され(removeClass)、ヒラの div要素に格下げ、と同時にCSSの z-index:8、かつ opacity:0.0 のプロパティが適用され、完全に見えなくなります。

}

…ただの閉じカッコですが。
一行目の開きカッコ？が、ここでようやく閉じられ、slideSwitch()という関数の定義が終わりました。

$(function() {setInterval( "slideSwitch()", 6000 );});

ここが関数の実行部分。
関数slideSwitch()を、インターバル6秒で実行せよ、という命令です。

以上のオリジナルコードのプチ改変版がコチラ↓

function slideSwitch(FRAME, S_TIME){
    var $active = $(FRAME + ' div.active');
    if($active.length == 0) $active = $(FRAME + ' div:last');
    var $next = $active.next().length ?
        　　　　　　　$active.next(): $(FRAME + ' div:first');
    $active.addClass('last-active');
    $next.css({opacity: 0.0}).addClass('active')
         .animate({opacity: 1.0}, S_TIME, 
             function(){
                 $active.removeClass('active last-active');
             });
}
$(function() {
    setInterval( "slideSwitch('#frame-js2',1500)", 6000 );
});

最後の setInterval() のところですべてのパラメータをまとめて指定できるようにしました。

  setInterval("slideSwitch('表示領域のID',切り替え時間)", インターバル);
      /* 切り替え時間とインターバルの単位は千分の一秒 */

本記事のクロスフェードはこっちの改変版の方で動かしています。
1500と6000をお好みで調節して、すばらなスライドショーをお楽しみあれ。



ここまでたどり着いた方はいないと思いますが…もはや咲-Ｓａｋｉ-カンケーなくなってるし。

なんとか間に合ったようです。
明日という日は、(睡魔に)負けませんよー