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

我將如何使它選擇下一個圖像，而不是股利說我的標題？

對不起，如果這沒有多大意義。

Answer 1

當你說：

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

編輯：

如果這些圖像疊加和隱藏的圖像應該永遠消失在已經顯示的圖像，你可以通過這樣做很容易修復：

a。

a。移動線$active.removeClass('active')回調

和

B的外側。添加以下CSS：

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

注意，:not()僞選擇不會在所有的瀏覽器（即老的IE），但你會得到的想法。

這裏的another fiddle

Answer 2

您必須在.caption級別而不是img級別執行.next()操作。有幾種方法可以做到這一點。這是一個與你正在使用的邏輯保持一個辦法：

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