jQuery help для слайд-шоу: добавление div для эффектов box-shadow имеет jQuery, выбирая div

Question

Итак, я использовал this place, чтобы помочь мне создать слайд-шоу, однако, благодаря определенным ограничениям CSS, вы не можете установить коробку-тень собственность IMG.

Однако проблема связана с характером сценария, как только он выполняется через IMG, он встречает div.

Сценарий не должен встречаться с div, так как div используется только для украшения (опять же, поскольку ящик-тень не может использоваться для IMG). Я надеялся, что кто-то сможет помочь мне с формированием кода, чтобы игнорировать div #slideshadow.

HTML (отредактированный с заменой картинок, благодаря CSS, размеры были необходимы):

<div id="slideshow"> 
    <img class="active" src="http://i.imgur.com/pPPkQDZ.jpg" alt="" /> 
    <img src="http://i.imgur.com/Axp8aGT.jpg" alt="" /> 
    <img src="http://i.imgur.com/UMpQ9eh.jpg" alt="" /> 
<div id="slideshadow">&nbsp;</div> 
</div> 

CSS:

#slideshadow { 
    position: absolute; 
    height:455px; 
    width: 750px; 
    box-shadow: inset 0px 0px 80px 0px rgba(0,0,0,0.75); 
    border-top-left-radius: 25px; 
    border-bottom-left-radius: 25px; 
    border-left: 5px groove #990000; 
    z-index: 15; 
} 

#slideshow { 
    position:relative; 
    height:455px; 
    width: 750px; 
    float: left; 
} 

#slideshow IMG { 
    position:absolute; 
    top:0; 
    left:0; 
    z-index:8; 
    opacity:0.0; 
    border-top-left-radius: 25px; 
    border-bottom-left-radius: 25px; 
    border-left: 5px groove #990000; 
} 

#slideshow IMG.active { 
    z-index:10; 
    opacity:1.0; 
} 

#slideshow IMG.last-active { 
    z-index:9; 
} 

SCRIPT:

function slideSwitch() { 
    var $active = $('#slideshow IMG.active'); 

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

    var $next = $active.next().length ? $active.next() 
     : $('#slideshow IMG:first'); 

    $active.addClass('last-active'); 

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

$(function() { 
    setInterval(slideSwitch, 3000); 
}); 

Answer 1

Вы можете передать специфический элемент внутри .next().

function slideSwitch() { 
    var $active = $('#slideshow IMG.active'); 

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

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

    $active.addClass('last-active'); 

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

$(function() { 
    setInterval(slideSwitch, 3000); 
});