jQuery Cycle - 这个jQuery脚本有什么问题？

我正在使用jquery循环插件来做幻灯片。我有5张照片滑动，但一次只显示3个缩略图传呼机。我想，当它滑向第4张照片时，底部的缩略图会发生变化，因此会显示第4张和第5张缩略图。jQuery Cycle - 这个jQuery脚本有什么问题？

我在页面上有一个“下一页”和“上一页”按钮，点击“下一步”时会显示第4和第5张缩略图，点击“上一页”返回到第1至第3张缩略图。所以基本上，我希望包含缩略图的div在滑动到第4张照片时自动制作左边的动画，就像您单击了“下一步”按钮一样。但我不知道为什么它不是工作....

下面是启动幻灯片并返回当前幻灯片的数量纸条：

<script type="text/javascript" src="js/jquery.min.js"></script> 
<script type="text/javascript" src="js/jquery.cycle.all.js"></script> 
<script type="text/javascript"> 
$(function() { 
    $('#slideshow').cycle({   
     fx:  'turnDown', 
     speed: 'fast', 
     pager: '#nav', 
     pagerAnchorBuilder: function(idx, slide) { 
      // return sel string for existing anchor 
      return '#nav li:eq(' + (idx) + ') a'; 
     } , 
    after: function (curr, next, opts) { 
    var number = (opts.currSlide + 1); 
$('#caption1').html(number); 
}, 
    }); 
}); 
</script>

下面是控制“下一步”的代码， “后退”按钮

<script type="text/javascript"> 
$(document).ready(function() { 
    $('#next_control').click(function() { 
     var c = $('#nav_content'); 
     var pos = c.position(); 
     var w = c.width(); 
     var status = w + pos.left; 
     var dif = w - 190; 
     var x = w + dif; 
     if (status > 190) { 
      c.stop().animate({ 
       left: pos.left - 180 
      }, 500); 
     }; 
    }); 
}); 
$(document).ready(function() { 
    $('#prev_control').click(function() { 
     var c = $('#nav_content'); 
     var pos = c.position(); 
     if (pos.left < 0) { 
      c.stop().animate({ 
       left: pos.left + 180 
      }, 500) 
     }; 
    }); 
});

最后，这里就是我认为会运行相同的效果，点击“下一步”按钮的代码时幻灯片幻灯片第四照片。但由于某种原因，它不工作......

$(document).ready(function(){ 
     if(number = 4){ 
      $('#nav_content').stop().animate({left: pos.left - 180},500); 
      }    
          }); 
</script>

任何想法..？谢谢！！！

来源

2011-11-26 Newcomer

你的意思是number == 4在你的最后一个代码块？另外，你在另一个函数中引用了一个本地作用域变量，这是行不通的。

来源

2011-11-26 08:25:15 Danalog

嗨Danalog，你的意思是我不能在循环以外的函数中使用变量“number”？你哟知道如何使它工作..？ thx – Newcomer

您需要将其设置为全局变量（yuck），或者以某种方式将其从DOM中取出。因为它看起来像是在'$（'＃caption1'）。html（number）;'中设置的，也许你可以将它从'＃caption1'元素中拉出来？ – Danalog

啊..不能让它工作，我实际上是新的编码，这是令人沮丧的:(我使用'var z = $（'＃caption1'）。html（）;'作为一个新的变量，这应该是当前显示的幻灯片的编号，然后我使用'if（z = 4）{$（'＃nav_content'）。stop（）。animate（{left：pos.left - 180}，500）;} – Newcomer

终于发现了什么问题......我没有在最后一个代码块中定义变量“pos”。现在解决了这个问题。感谢Danalog的帮助！

来源

2011-11-27 01:09:37 Newcomer

很高兴我能够帮助！我应该注意到，pos没有被定义，当数字没有被定义时，对不起！ – Danalog

jQuery Cycle - 这个jQuery脚本有什么问题？

回答

相关问题