Question

我使用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’);
}

在afterAnimation：function（）{supersized.shutter.js的部分，但似乎根本没有做任何事情。有什么建议吗？

Answer 1

$(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的.goto函数，但如果它在第一行工作，它现在可以工作了。：）

超大似乎创建了一个自动导航，但你不必在函数中找到它，尝试使用它，并检查它是否有效，然后你可以重新定义div：

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

Answer 2

将语句更改为“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;
        }
}

使用Supersized API / Variables在图像上切换css类

2 个答案: