Question

次の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要素の、それは次の画像を選択するだろうか？

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

Answer 1

：これは、あなたが使用していたロジックと一致している一つの方法です

それは next画像を直接隣人であることを前提としてい

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

（$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 working demo

EDIT参照してください：場合、これらの画像が重ねられ、隠された画像は、上で常にフェードインする必要があり

をすでに表示されている画像は、これを簡単に修正できます：

a。コールバック

と

Bの外線$active.removeClass('active')を動かします。 :not()擬似セレクタは、すべてのブラウザ（すなわち、古いのIE）では動作しませんが、あなたのアイデアを得るだろうと

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

注：以下のCSSを追加します。

はここで、これは完全に働いた、another fiddle

Answer 2

操作は、imgレベルではなく、.captionレベルで行う必要があります。それを行うにはいくつかの方法があります。あなたが言っているとき

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}); 
     }) 
}