Question

我有5张照片幻灯片正在运行，我想在滑动到第4张照片时执行animate（）功能。幻灯片显示在滑动到第4个幻灯片时停止，而不是运行animate（）;发生什么事了？

<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>

谢谢！

Answer 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);
    };
};

jQuery循环 - 什么阻止了幻灯片，为什么动画（）不起作用？

1 个答案: