jquery 使用超大型API/变量在图像上切换CSS类

y4ekin9u  于 9个月前  发布在  jQuery
关注(0)|答案(2)|浏览(102)

我正在使用Supersized jQuery插件来动画我的背景,我已经使用了他们的API来让幻灯片在点击图像/链接时发生变化(我使用:

$('.navone').click(function(){
api.goTo(1);
});

字符串
现在我需要的活动图像/链接有一个背景图像时,它的幻灯片是活跃的,到目前为止,我有这个:

jQuery(function($){
if(vars.current_slide = 1){
$('.navone').toggleClass('active');
});
});


这似乎没有做任何事情,我仍然是相当新的JavaScript和jQuery,任何建议将是伟大的。
编辑:
我让

if (vars.current_slide == 1){
(‘#navone’).addClass(‘.active’);
} else {
(‘#navone’).removeClass(‘.active’);
}


在supersized.shutter.js的afterAnimation : function(){部分,但它似乎没有做任何事情。有什么建议吗?

koaltpgm

koaltpgm1#

$(document).ready(function(){ //waits until the document is ready
    $('.navone').click(function(){ //bind a function to the element with class navone
        $('.active').removeClass('active'); //remove all active class
        $(this).addClass('active'); //add class active to the navone link
        api.goTo(1); //make the supersized go to the the slide 1
    });
});

字符串
我不能100%确定这个API的.后藤函数,但是如果它在第一行工作,它现在就可以工作了。:)
supersized似乎创建了一个自动导航,但你不必在函数中指向它,尝试使用这个,并检查它是否有效,然后你可以重新设置div:

<div id="controls-wrapper" class="load-item">
    <div id="controls">
        <ul id="slide-list"></ul>
    </div>
</div>

xmq68pz9

xmq68pz92#

将该语句更改为“switch”语句,并添加类以在实际链接上初始启动。

afterAnimation : function(){
        $('#navone,#navtwo,#navthree,#navfour,#navfive,#navsix,#navseven').removeClass('active');
        switch(vars.current_slide) {
            case 0 : $('#navone').addClass('active'); break;
            case 1 : $('#navtwo').addClass('active'); break;
            case 2 : $('#navthree').addClass('active'); break;
            case 3 : $('#navfour').addClass('active'); break;
            case 4 : $('#navfive').addClass('active'); break;
            case 5 : $('#navsix').addClass('active'); break;
            case 6 : $('#navseven').addClass('active'); break;
        }
}

字符串

相关问题