什么是防止这个动画是自动的？

Question

我的客户希望他们的网站上各滚动这个“赞助商”滑块，可以随机或者淡入和淡出。我尝试过不同的事情来完成所有这些事情，但没有任何效果。此时滑块由设置为“.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的图像滑块的脚本。如果是这样的话，你很可能会以困难的方式去做这件事。通常你包括提供的脚本在你的头，然后在你的HTML文件，它指向的DOM元素，像

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

如果您在使用特定滑块的麻烦，请让我们知道哪一个。如果你还没有，我会建议使用滑块Orbit（它现在是Zurb的基金会框架的一部分，但你可以单独下载它）。另外，jQuery上有几十个滑块，如果你完全熟悉jQuery，大多数滑块都很容易配置。

如果你想重新发明轮子，jQuery有一个animate()函数（在你提供的代码中使用了几次）。您需要使用无论是setTimeout()或setInterval()功能所触发的onload /的document.ready，并在$('#sponsors a.prev').click()和$('#sponsors a.next').click()声明的函数应该被移动，所以你可以回收。由于已经存在这么多，我不太愿意通过编写自己的滑块来走路。

边注：请注意W3Schools的绝不与W3C下属;我在这里引用他们，因为他们的例子很简单。