jQuery 循环 - 是啥停止了幻灯片，为啥 animate() 不起作用？

Posted 2023-05-08

【中文标题】jQuery 循环 - 是啥停止了幻灯片，为啥 animate() 不起作用？

【英文标题】：jQuery cycle-What's stopping the slide and why isn't animate() working?jQuery 循环 - 是什么停止了幻灯片，为什么 animate() 不起作用？

【发布时间】：2012-01-06 20:39:11

【问题描述】：

我有一个 5 张照片幻灯片正在运行，当它滑到第 4 张照片时我想做一个 animate() 函数。不是运行 animate();，而是在幻灯片滑到第 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:       'fadeZoom',
    timeout:   2000,
    pagerAnchorBuilder: function(idx, slide) 
        // return sel string for existing anchor
        return '#nav li:eq(' + (idx) + ') a';
     ,
    after:     onAfter,
);
);

function onAfter(curr,next,opts) 
var caption = (opts.currSlide + 1);
$('#caption').html(caption);
var number = $('#caption').html();
if(caption == "4")
     $('#nav_content').animate(
            left: pos.left - 180
            , 500);
        ;
;
</script>

谢谢！

【问题讨论】：

你能用JS Fiddle demo复制这个吗？

嗨大卫，我不知道如何使用它，但我设法将页面上传到朋友的服务器link。在页面上，我的“下一个”和“上一个”按钮也可以正常工作，但是一旦幻灯片到达第四张照片，它们就会停止工作。我知道if(caption == "4")... 行肯定有问题，但不知道如何解决。谢谢！

如果你查看浏览器的 JavaScript 控制台，你会看到错误：'Uncaught ReferenceError: pos is not defined' 所以我怀疑问题出在pos 变量上。

天哪，非常感谢。它现在有效！抱歉，我对所有这些编码都很陌生，如何使用浏览器检查 Javascript 错误？再次感谢大卫！

这取决于您使用的浏览器，但 JavaScript 控制台通常位于工具菜单下的某处；在 Chromium/Chrome 中，您可以使用键盘快捷键 ctrl + shift + i，然后单击“控制台”选项卡。

【参考方案1】：

忘记在函数中定义变量“pos”。现在它按预期工作。

<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:       'fadeZoom',
    timeout:   2000,
    pagerAnchorBuilder: function(idx, slide) 
        // return sel string for existing anchor
        return '#nav li:eq(' + (idx) + ') a';
     ,
    after:     onAfter,
);
);

function onAfter(curr,next,opts) 
var caption = (opts.currSlide + 1);
$('#caption').html(caption);
var number = $('#caption').html();
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(caption == "4")
     $('#nav_content').animate(
            left: pos.left - 180
        , 500);
    ;
    if(caption == "1" & pos.left < 0)
     $('#nav_content').animate(
            left: pos.left + 180
        , 500);
    ;
;