开发者

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.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜