Help me change jquery slideshow to add additional class
I have a slideshow, its only changing photos. I need to add a new div box on top of each photo. At the moment jquery code takes just #slideshow and .active. How to amend it to grab also new div class ".newbox" (.newbox1 for first photo, .newbox2 for second and so on). Each time a different box has to come up on top of different photos. This is my photo slideshow jquery code:
function slideSwitch() {
var $active = $('#slideshow DIV.active');
if ( $active.length == 0 ) $active = $('#slideshow DIV:last');
// use this to pull the divs in the order they appear in the markup
var $next = $active.next().length ? $active.next()
: $('#slideshow DIV:first');
// uncomment below to pull the divs randomly
// var $sibs = $active.siblings();
// var rndNum = Math.floor(Math.random() * $sibs.length );
// var $next = $( $sibs[ rndNum ] );
$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()", 5000 );
});
<开发者_如何学运维;/script>
My html:
div id="slideshow">
<div class="active">
<a href="http://www.mylink.com/" target="_blank"><img src="http://route/img.jpg" alt="alt" /></a>
<div class="newbox1"></div>
div class="newbox2"></div>
div class="newbox3"></div>
div class="newbox4"></div>
div class="newbox5"></div>
</div>
You have messed up your HTML at least in the post. You can add active class to the newbox div elements and then get rid of it when the slide is changed. In a word you don't need the div with the "active" class.
精彩评论