是啥阻止了这个动画是自动的？

Posted 2023-05-08

【中文标题】是啥阻止了这个动画是自动的？

【英文标题】：What is preventing this animation from being automatic?是什么阻止了这个动画是自动的？

【发布时间】：2012-12-07 15:32:08

【问题描述】：

我的客户希望他们网站上的这个“赞助商”滑块可以滚动、随机化或淡入淡出。我尝试了不同的方法来实现所有这些，但没有任何效果。现在，滑块由设置为“.click”命令的按钮控制。有没有办法用javascript添加动画，我需要改变什么才能做到这一点？如果不是动画，有没有办法用Javascript随机化页面加载上的数组？我一直在尝试输入不同的更改，但没有任何效果。我觉得也许我需要“关闭其他东西”才能让它们工作......

虽然我是 Javascript 新手，但我希望能得到一些帮助。

代码如下：

// ============
// = SPONSORS =
// ============

if($('#sponsors').length>0)

    // let's make sure our logos are centered
    $(window).load(function()
        $('#sponsor-logos li').each(function()
            wrapper = $(this).find('span.logo');
            wrapper_height = wrapper.height();
            sponsor_logo = $(this).find('img');
            total_height = 84;
            logo_height = sponsor_logo.height();
            buffer = Math.floor(((total_height - logo_height) / 2));
            wrapper.css('paddingTop',buffer + 'px').height(wrapper_height-buffer);
        );
    );

    window_width = 656;
    slide_duration = 500;


    // get our arrows on there
    $('#sponsors .inner').prepend('<a class="prev" href="#">Prev</a>').append('<a class="next" href="#">Next</a>');

    // set our width
    thumbs = $('#sponsor-logos');
    thumbs.width(thumbs.children().length*164);
    thumbs.wrap('<div class="slider"></div>');




    // hook the arrows
    $('#sponsors  a.prev').click(function()
        thumbs = $('#sponsor-logos');
        if((Math.abs(parseInt(thumbs.css('left').replace('px',''),10)))>1)
            if(!thumbs.data('animating'))
                thumbs.data('animating',true);
                thumbs.animate(
                        left:'+='+window_width+'px',
                        slide_duration, 'swing', function()
                            thumbs.data('animating',false);
                        
                    );
            
        else
            // already too far, we'll bounce for feedback
            if(!thumbs.data('animating'))
                thumbs.data('animating',true);
                thumbs.animate(
                        left:'+=15px',
                        (slide_duration/5), 'swing', function()
                            thumbs.animate(
                                    left:'-=15px',
                                    (slide_duration/5), 'swing', function()
                                        thumbs.data('animating',false);
                                    
                                );
                        
                    );
            
        
        return false;
    );

    $('#sponsors a.next').click(function()
        thumbs = $('#sponsor-logos');
        if(thumbs.width() - window_width - Math.abs(parseInt(thumbs.css('left').replace('px',''),10)) > 150) // 150 represents at least one thumb (194 to be exact)
            if(!thumbs.data('animating'))
                thumbs.data('animating',true);
                thumbs.animate(
                        left:'-='+window_width+'px',
                        slide_duration, 'swing', function()
                            thumbs.data('animating',false);
                        
                    );
            
        else
            // already too far, we'll bounce for feedback
            if(!thumbs.data('animating'))
                thumbs.data('animating',true);
                thumbs.animate(
                        left:'-=15px',
                        (slide_duration/5), 'swing', function()
                            thumbs.animate(
                                    left:'+=15px',
                                    (slide_duration/5), 'swing', function()
                                        thumbs.data('animating',false);
                                    
                                );
                        
                    );
            
        
        return false;
    );

【问题讨论】：

在$('#sponsor-logos li').each() 中，您将变量声明为隐含的全局变量。您可能应该使用 var: var wrapper = $(this).find('span.logo'), …, buffer = …; 声明它们（使用逗号分隔每个新变量并以分号结束声明块）。

【参考方案1】：

看起来您可能已经修改了预制 jquery 图像滑块的脚本。如果是这种情况，您很可能会遇到困难。通常你在你的头文件中包含提供的脚本，然后在你的 html 文件中，将它指向你的 DOM 中的一个元素，比如

$("#galleryContainerElement").imgSlider( object:of, slider:preferences );

如果您在使用特定滑块时遇到问题，请告诉我们是哪一个。

如果您还没有，我建议您使用像 Orbit 这样的滑块（它现在是 Zurb 的 Foundation 框架的一部分，但您可以单独下载）。或者，有几十个基于 jQuery 构建的滑块，如果您完全熟悉 jQuery，大多数都可以轻松配置。

如果您想重新发明***，jQuery 有一个 animate() 函数（在您提供的代码中使用了几次）。您将需要使用触发 onload / document.ready 的 setTimeout() 或 setInterval() 函数，并且应将 $('#sponsors a.prev').click() 和 $('#sponsors a.next').click() 中声明的函数移出以便您可以回收它们。考虑到已经存在这么多滑块，我不太愿意编写自己的滑块。

旁注：请注意 w3schools 与 W3C 没有任何关联；我在这里引用它们是因为它们的例子很简单。

【讨论】：

我才意识到我从来没有感谢过你这个彻底的回答。最后，我选择了另一个滑块。感谢您引导我朝着正确的方向前进！

@Bana，不客气 :) 你会批准这个作为答案，这样问题就可以结束了吗？