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

y4ekin9u  于 2024-01-07  发布在  jQuery
关注(0)|答案(2)|浏览(152)

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

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

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

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


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

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


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

koaltpgm

koaltpgm1#

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

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

  1. <div id="controls-wrapper" class="load-item">
  2. <div id="controls">
  3. <ul id="slide-list"></ul>
  4. </div>
  5. </div>

展开查看全部
xmq68pz9

xmq68pz92#

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

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

字符串

相关问题