jQuery help for slideshow: adding a div for box-shadow effects has jQuery selecting the div

问题

So I used this place to help me create a slideshow, however, thanks to certain limits of CSS, you can't set a box-shadow property to IMG.

However, the issue is thanks to the nature of the script, once it's done running through the IMGs, it encounters the div.

The script is not supposed to encounter the div as the div is only used for decoration (again, since box-shadow can't be used for IMG). I was hoping someone would be able to help me with the formating of the code so as to ignore the #slideshadow div.

HTML (edited with replacement pictures, thanks to CSS, the dimensions were necessary):

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

回答1:

You can pass a specific element inside .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 );
});

来源：https://stackoverflow.com/questions/29606294/jquery-help-for-slideshow-adding-a-div-for-box-shadow-effects-has-jquery-select

标签

javascript

jquery

css

addclass

box-shadow