jQuery帮助进行幻灯片显示:为框阴影效果添加div使jQuery选择div [英] jQuery help for slideshow: adding a div for box-shadow effects has jQuery selecting the div

问题描述

所以我用这个地方来帮助我创建幻灯片，由于CSS的某些限制，您无法为IMG设置box-shadow属性.

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.

但是，问题出在脚本的本质上，一旦在IMG中完成运行，它就会遇到div.

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

脚本不应该遇到div，因为div仅用于装饰(再次，因为box-shadow不能用于IMG).我希望有人能够帮助我设置代码格式，从而忽略#slideshadow 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(使用CSS替换图片进行编辑，因此尺寸是必需的):

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

脚本:

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

推荐答案

您可以在.next()内传递特定元素.

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

这篇关于jQuery帮助进行幻灯片显示:为框阴影效果添加div使jQuery选择div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！