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

发布于 2024-12-18 03:55:25 字数 2051 浏览 2 评论 0原文

我正在使用 jquery 循环插件来制作幻灯片。我有 5 张照片在滑动，但一次只显示 3 个缩略图寻呼机。我希望当它滑动到第四张照片时，底部的缩略图会发生变化，以便显示第四张和第五张缩略图。

我的页面上有一个“下一个”和“上一个”按钮，当单击“下一个”时，它将显示第四个和第五个缩略图，单击“上一个”可返回到第一个到第三个缩略图。所以基本上，我希望包含缩略图的 div 在滑动到第四张照片时自动向左移动，就像您单击“下一步”按钮一样。但我不知道为什么它不起作用......

这是启动幻灯片并返回当前幻灯片编号的脚本：

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

有什么想法......？谢谢！！！

原文

I am using the jquery cycle plugin to do a slideshow. I have 5 photos sliding but only showing 3 thumbnail pagers at a time. I wanted that when it slides to the 4th photo, the thumbnails on a bottom changes so it shows the 4th and 5th thumbnails.

I have a "Next" and "Prev" button on the page, when click on "Next" it'll display the 4th and 5th thumbnails, click "Prev" to go back to the 1st-3rd thumbnail. So basically, i want the div that contains the thumbnail to animate left automatically when it slides to the 4th photo as if you clicked on the "Next" button. But i have no idea why it isnt working....

Here's the scrip that start the slide and return the number of the current slide:

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

Here's the code that controls the "Next" and "Prev" button

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

Finally, here's the code that I thought would run the same effect as clicking on the "Next" button when the slideshow slides to the 4th photo. But it's not working for some reason....

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

Any idea..? Thanks!!!

分享到QQ

分享到微博