3

次の HTML マークアップがあります。

<div class="caption">
    <img class='active' alt='My Caption' src='path/to/image' />
    <div>My Caption</div>
</div>
<div class="caption">
    <img alt='My Caption 2' src='path/to/image' />
    <div>My Caption 2</div>
</div>

キャプションは、いくつかの JS を使用して alt タグからこれらの DIV 内に配置されています。

        $('#slider img').each(function() {
            $(this).wrap('<div class="caption"></div>').after('<div>' + $(this).attr('alt') + '</div>');
            $('.caption').width($(this).width()).children('div').each(function() {
                $(this).css({width: $(this).siblings('#slider img').width() -10, opacity: 0.5, display: 'block'});
            });
        });

私が抱えている問題は、画像を「スライド」させようとするときです。以前はうまくいきましたが、キャプションを追加したところ、問題が発生しました。

これが起こるはずのことです：
クラスをアクティブに設定し、画像をフェードインする各画像を通過します。キャプションなしで正常に機能しましたが、キャプションがあるので、キャプションが含まれるdivにアクティブなクラスを配置しています.

ここに私のJSがあります

function simpleSlider(){
    var $active = $('#slider img.active');

    if($active.length == 0) $active = $('#slideshow img:last');

    var $next = $active.next('img').length ? $active.next()
        : $('#slider img:first');

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

私のキャプションを言っているdivの代わりに、次の画像を選択するにはどうすればよいですか?

これがあまり意味をなさない場合は申し訳ありません。

4

2 に答える 2

4

あなたが言っているとき：

var $next = $active.next('img').length ? $active.next()
        : $('#slider img:first');

next画像が直接の隣人であると想定しています（そのため、$active.next('img').length周囲に画像がないため、この場合は常に 0 になります）。しかし、コンテナ要素内に画像をラップしたため、トラバースには別のアプローチを使用する必要があります。

私は次のようにします：

function simpleSlider() {


    var $active = $('.caption.active');

    if ($active.length == 0) $active = $('.caption:last');

    var $next = $active.next('.caption').length ? $active.next() : $('.caption:first');

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

実際のデモを見る

編集：

これらの画像がオーバーレイされ、非表示の画像が既に表示されている画像の上に常にフェードする必要がある場合は、次のようにして簡単に修正できます。

a. $active.removeClass('active')行をコールバックの外に移動します

と

b. 次の CSS を追加します。

.caption{
z-index: 100;
}
.caption:not(.active){
z-index: 0;
}

:not()疑似セレクターはすべてのブラウザー (つまり、古い IE) で機能しないことに注意してください。

ここに別のフィドルがあります

于 2012-04-18T10:54:08.440 に答える
3

.next()レベルではなく、.caption レベルで操作を行う必要がありimgます。それにはいくつかの方法があります。これは、使用していたロジックと一致する 1 つの方法です。

function simpleSlider(){
    var $active = $('#slider img.active');
    if ($active.length == 0) $active = $('#slideshow img:last');
    var $parent = $active.closest(".caption");

    var $nextParent = $parent.next(".caption");
    if (!$nextParent.length) {
        $nextParent = $parent.siblings(".caption").eq(0);
    }
    var $next = $nextParent.find("img");

    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active');
            $active.css({opacity: 0.0});
        })
}
于 2012-04-18T10:53:56.823 に答える