Question

我正在使用jquery循环插件进行幻灯片放映。我有5张照片滑动，但一次只显示3个缩略图寻呼机。我希望当它滑到第4张照片时，底部的缩略图会发生变化，因此会显示第4张和第5张缩略图。

我在页面上有一个“下一个”和“上一个”按钮，当点击“下一步”时，它将显示第四和第五个缩略图，点击“上一个”返回第一个到第三个缩略图。所以基本上，我希望包含缩略图的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)
        };
    });
});

最后，这里的代码我认为与幻灯片播放到第4张照片时单击“下一步”按钮的效果相同。但它出于某种原因不起作用......

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

任何想法..？感谢!!!

Answer 1

你的意思是你最后一个代码块中的number == 4吗？此外，您在另一个函数中引用了一个本地范围的变量，但这不起作用。

Answer 2

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

jQuery Cycle - 这个jquery脚本出了什么问题？

2 个答案: