Question

我正在尝试在jquery中创建一个滑块并卡在最后。

我在<ul>中创建了一个<li>，然后是4 <ul>，代表每个<li>幻灯片。当我点击下一个按钮时，幻灯片1被动画化为幻灯片2.当我点击下一个按钮时，当前幻灯片被动画化为下一个。但是，如何设置最后一张幻灯片的动画以加载第一张幻灯片。

我正在将左侧属性的值更改为幻灯片中的动画。代码如下。请指导我。谢谢！

        current = 0;

        current_slide=1;

        $(document).ready(function(){
            var totalSlides=$(".slider ul li").length;
            $(".slider ul").removeAttr('width');
            $(".slider ul").attr('width',951*totalSlides);

            $('#next img').click(function(){
                current_slide++;
                current -= 951;
                if(current_slide>totalSlides)
                    {
                        current=0;
                        current_slide=1;
                        $(".slider ul").css('left',0);      
                    }
                $(".slider ul").animate({"left":current+"px"}, "slow");
            });

       /* Previous button is not fully functional yet*/
            $('#prev img').click(function(){
                current_slide--;
                current += 951;
                if(current_slide==1)
                    {current=0;current_slide=totalSlides;}
                $(".slider ul").animate({"left":current+"px"}, "slow");
            });
        });

Answer 1

我不确定“加载第一张幻灯片”是什么意思，当你到达幻灯片的任何一端时，你所拥有的代码应该会倒带。但是从查看代码开始，如果您只是删除$(".slider ul").css('left',0);它应该可以正常工作。

此外，在之前的代码中，我将当前数字从零更改为951 * totalSlides以将其定位在正确的位置 - 我尚未对其进行测试，因此可能需要951 * (totalSlides - 1)。

    current = 0;

    current_slide=1;

    $(document).ready(function(){
        var totalSlides=$(".slider ul li").length;
        $(".slider ul").removeAttr('width');
        $(".slider ul").attr('width',951*totalSlides);

        $('#next img').click(function(){
            current_slide++;
            current -= 951;
            if(current_slide>totalSlides)
                {
                    current=0;
                    current_slide=1;    
                }
            $(".slider ul").animate({"left":current+"px"}, "slow");
        });

   /* Previous button is not fully functional yet*/
        $('#prev img').click(function(){
            current_slide--;
            current += 951;
            if(current_slide==1)
                {
                    current = 951 * totalSlides;
                    current_slide = totalSlides;
                }
            $(".slider ul").animate({"left":current+"px"}, "slow");
        });
    });

另请注意，当您离开负面定位时，jQuery动画中有a bug＆gt; 10,000像素 - 计划在1.5版本中修复。因此，如果您使用大量幻灯片，我建议您切换代码以使用scrollLeft

更新

如果您想要一个无限滑块，可以使用两种方法：

堆叠所有幻灯片并隐藏除当前幻灯片之外的所有幻灯片。当用户单击下一个或上一个按钮时，将下一张幻灯片放在适当的一侧，然后将当前幻灯片滑出视图，将新幻灯片放入视图中 - 查看使用此方法的jQuery Slider。
第二种方法浮动所有幻灯片，然后复制第一张和最后一张幻灯片。第一张幻灯片在最后一张之后添加，最后一张幻灯片副本在第一张之前添加。然后，当您在最后一张幻灯片上并按下一步时，克隆的幻灯片将移动到视图中。动画完成后，将视图重新定位到第一张幻灯片。这个方法用于我的jQuery AnythingSlider。

自定义jquery滑块

1 个答案: