0

最初に言いたいのは、私は jQuery を学ぶのが初めてで、それを使ってスライドショーを作成しようとしているということです。

jQuery は次のとおりです。

$(document).ready(function() {
    $("#Slider li img").click(function() {
        $("").fadeTo('slow',0);
        $('#mainImg').attr('src',$(this).attr('src').replace('thumb/', ''));
    });

    var imgSwap = [];
    $("#Slider li img").each(function() {
        imgUrl = this.src.replace('thumb/', '');
        imgSwap.push(imgUrl);
    });
    $(imgSwap).preload();
});

$.fn.preload = function() {
    this.each( function() { $('<img/>')[0].src = this; }); 
}

そして私のdiv：

<div id="Slider"> 
    <img src="sliderImg/img_1.png" alt="" id="mainImg" />
    <ul>
        <li><img src="sliderImg/thumb/img_1.png" alt="" /></li>
        <li><img src="sliderImg/thumb/img_2.png" alt="" /></li>
        <li><img src="sliderImg/thumb/img_3.png" alt="" /></li>
        <li><img src="sliderImg/thumb/img_4.png" alt="" /></li>
        <li><img src="sliderImg/thumb/img_5.png" alt="" /></li>
        <li><img src="sliderImg/thumb/img_6.png" alt="" /></li>
        <li><img src="sliderImg/thumb/img_7.png" alt="" /></li>
        <li><img src="sliderImg/thumb/img_8.png" alt="" /></li>
        <li><img src="sliderImg/thumb/img_9.png" alt="" /></li>
    </ul>
</div>

私がやりたいのは、画像間の遷移を作成することです。
どうすればそのようなことができますか？関数を使用しようとしましたfadeTo()が、うまくいきませんでした。

手伝ってくれてありがとう

4

4 に答える 4

0

すべての画像を取得し、配列に保存する必要があります。最初のものを表示します。クリックすると次のものが表示され (配列内の 1 つのステップに移動)、残りは非表示になります。その後も同様です。残りは単なるCSSです。

于 2013-10-22T17:57:00.397 に答える
0

他の回答はコードの問題を強調していますが、独自のスライドショーを作成する代わりに、JQuery のスライドショー プラグインを使用することを検討できます。目的の効果を得るためにプラグインを使用する方が簡単な場合があります。次のJQueryプラグイン Web サイトでスライドショー プラグインを参照でき ます。

于 2013-10-22T17:57:30.477 に答える