Итак, я использовал this place, чтобы помочь мне создать слайд-шоу, однако, благодаря определенным ограничениям CSS, вы не можете установить коробку-тень собственность IMG.jQuery help для слайд-шоу: добавление div для эффектов box-shadow имеет jQuery, выбирая div
Однако проблема связана с характером сценария, как только он выполняется через 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"> </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);
});
В чем проблема? –
Сценарий не должен встречаться с div, так как div используется только для украшения (поскольку box-shadow не может использоваться для IMG). Я надеялся, что кто-то сможет помочь в создании кода, чтобы игнорировать div #slideshadow. – RabblerouserGT
Вы можете сделать это следующим образом: 'var $ next = $ active.next ('img'). Length? $ active.next ('img'): $ ('# слайд-шоу IMG: сначала'); '. – anpsmn