javascript - 是什么阻止了该动画的自动执行？

Question

我的客户希望他们网站上的这个“赞助商” slider 可以滚动、随机或淡入和淡出。我尝试了不同的方法来实现所有这些，但没有任何效果。现在， slider 由设置为“.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;
    });

}

Answer 1

看起来您可能修改了预制 jquery 图像 slider 的脚本。如果是这样的话，你很可能会遇到困难。通常，您将提供的脚本包含在 header 中，然后在 html 文件中将其指向 DOM 中的一个元素，例如

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

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

如果您还没有这样做，我建议您使用像 Orbit 这样的 slider (它现在是 Zurb 的 Foundation 框架的一部分，但您可以单独下载)。或者，有数十个基于 jQuery 构建的 slider ，如果您非常熟悉 jQuery，那么大多数都可以轻松配置。

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

旁注:请注意，w3schools 与 W3C 没有任何附属关系；我在这里引用它们是因为它们的示例很简单。