0

特注のスライダーを作成しようとしていますが、助けが必要です。理論的には、比較的単純なはずです。私はそれを信じられないほど難しく見せています。

#prev-btn と #next-btn の 2 つのボタンを作成しました。DOM 要素の 3 つの「スライド」を切り替えるようにします。現時点では、スライドショー プラグインを使用するよう私に叫んでいるでしょう。ただし、問題は、これらは実際にはスライドではなく、実際にはページの周りに散らばっている DOM 要素であり、それらをフェードイン/アウトしてオン/オフしたいということです。

「.first」、「.second」、「.third」という名前のクラスを表示したいDOM要素のそれぞれに、それらを表示したい「フェーズ」に対応するように指定しました。

<div id="1" class="first"></div>
<div id="2" class="second"></div>
<div id="3" class="third"></div>

.second, .third {display: none;}

明らかに、.first オブジェクトが表示されるとき、#prev-btn は .first オブジェクトを fadeOut し、.first オブジェクトを fadeIn する必要があります。また、.first オブジェクトが表示されている場合、#next-btn は .first オブジェクトをフェードアウトし、.second クラスを表示する必要があります。あなたはアイデアを得る。これは私が苦労しているビットです。

私は addClass と removeClass をいじりましたが、#prev-btn と #next-btn に追加されたすべてのクラスに対してクリック機能を繰り返さないと、洗練された解決策を思いつくことができないようです。ばかげていることは誰もが知っています（以下の骨の折れるばかげたコードのサンプル）。

$j("#prev-btn.first").click(function(){
    $j("#prev-btn").addClass('third').removeClass('first');
    $j("#next-btn").addClass('third').removeClass('first');
    $j(".first").fadeOut(500, function(){
        $j(".third").fadeIn(500);
    });
});
$j("#next-btn.first").click(function(){
    $j("#prev-btn").addClass('second').removeClass('first');
    $j("#next-btn").addClass('second').removeClass('first');
    $j(".first").fadeOut(500, function(){
        $j(".second").fadeIn(500);
    });
});

そのナンセンスからわかるように、私はまだ jQuery で最も明るいスパークではなく、まだ賢いことを行うことはできません。誰かがこれにも自動スライドタイマーを実装できる場合は、すごい-ただすごい. しかし、それは 100% 必要ではありません。乾杯！

4

1 に答える 1

1 
elem = ['first', 'second', 'third'];
var current = 0, previous = 0, n_elem = elem.length;
function change() {
    $j("." + elem[previous]).fadeOut(500, function(){
        $j("."+elem[current]).fadeIn(500);
    });
}
$j("#prev-btn").click(function(){
    previous = current;
    --current;
    if(current === -1) {
        current = n_elem - 1;
    }
    change();
});
$j("#next-btn").click(function(){
    previous = current;
    ++current;
    if(current == n_elem) {
        current = 0;
    }
    change();
});
于 2012-11-29T17:32:33.950 に答える