1

Christiaan Scheermeijer のおかげで、スライダーが正しく遷移するようになりました。しかし、今は画像の焦点がずれているようです。スライドを適切に滑らかにするには、z-index などを使用する必要がありますか? 現在、本来あるべきように「フェード」するのはスライド 4 だけで、スライド 1 に戻ります。私は本当に困惑しています。フェードのタイミングを計ってみましたが、問題ないようです。「次のスライド」が、フェードするはずのスライドの前景に飛び出しているようです。

http://jsfiddle.net/WASasquatch/haBAS/2/

$('#hi1').fadeTo("slow", 1.0);
var slide = 0,
slides = 4,
ids = [
    '#hi1',
    '#hi2',
    '#hi3',
    '#hi4', ];
slideShow = setInterval(function () {
    var nextSlide = slide + 1;
    if (nextSlide > slides - 1) {
        nextSlide = 0;
    }
    $(ids[nextSlide]).fadeTo(100, 1.0);
    $(ids[slide]).fadeTo(1200, 0);
    slide++;
    if (slide > slides - 1) {
        slide = 0;
    }
}, 5000);
4

1 に答える 1

2

これを試してください。

変化する：

$(ids[nextSlide]).fadeTo(100, 1.0);
$(ids[slide]).fadeTo(1200, 0);

に：

$(ids[slide]).fadeTo(300, 0);
$(ids[nextSlide]).fadeTo(2300, 1.0);

#containerCSS ルールに以下を追加します。

background-color: #000;

また、この変更も検討することをお勧めします (動作させる必要はありませんが、コードを簡素化できます)。

変化する：

slide++;
if (slide > slides - 1) {
    slide = 0;
}

に：

slide = nextSlide;

(次のスライドがどうなるかは既に計算済みです。再計算して境界を確認する代わりに、それをそのまま使用できます。)

もう1つの提案は、 ids.lengthwhere you haveの使用を検討しslides、削除することです-これが理にかなっている理由は、将来スライドを追加または削除することにした場合、カウントslides varも更新することを覚えておく必要がないためです-それ配列slidesで指定した数に関係なく機能します。ids

このJSFiddleを検討してください。

于 2013-04-27T22:40:35.607 に答える