2016-08-25 2 views
2

무한 회전 목마를 만들려고합니다. 난 내 HTML이 있습니다전에 jQuery가 작동하지 않습니다.

<div class="logo-mini-scroller floatInner toLeft"> 
    <span class="_l toLeft"> 
     <a href="javascript:void(0)"></a> 
    </span> 
    <div id="carousel_inner"> 
     <ul class="_cont toLeft" id="carousel_ul"> 
      <li class="mini-1"> 
       <a href="#"></a> 
      </li> 

      <li class="mini-2"> 
       <a href="#"></a> 
      </li> 

      <li class="mini-3"> 
       <a href="#"></a> 
      </li> 
     </ul> 
    </div> 
    <span class="_r toRight"> 
     <a href="javascript:void(0)"></a> 
    </span> 
</div> 

및 작동하지 않습니다 전 기능 후에 난 내 자바 스크립트

$(document).ready(function() { 
    $('#carousel_ul li:first').before($('#carousel_ul li:last')); 

    $('.logo-mini-scroller span._r.toRight').click(function(){ 
     var item_width = $('#carousel_ul li').outerWidth() + 10; 
     var left_indent = parseInt($('#carousel_ul').css('left')) - item_width; 

     $('#carousel_ul').animate({'left' : left_indent},{queue:false, duration:500},function(){ 
      $('#carousel_ul li:first').insertAfter($('#carousel_ul li:last')); 
      $('#carousel_ul').css({'left' : '-93px'}); 
     }); 
    }); 

    $('.logo-mini-scroller span._l.toLeft').click(function(){ 
     var item_width = $('#carousel_ul li').outerWidth() + 10; 
     var left_indent = parseInt($('#carousel_ul').css('left')) + item_width; 

     $('#carousel_ul').animate({'left' : left_indent},{queue:false, duration:500},function(){ 
      $('#carousel_ul li:first').before($('#carousel_ul li:last')); 
      $('#carousel_ul').css({'left' : '-93px'}); 
     }); 

    }); 

    $('#carousel_ul li').click(function(){ 
     var self = this; 

     $('#carousel_ul li').each(function(){ 
      if ($(this).hasClass('active')){ 
       $(this).removeClass('active'); 
      } 

      $(self).addClass('active'); 
     }) 
    }); 

    }); 

JQuery와이 있습니다. 모든 애니메이션은 훌륭하게 작동하지만 요소를 앞에 추가하거나 추가하지는 않습니다. 나는 또한 inserBefore와 inserAfeter를 시도했지만 같은 결과를 얻었다.

+0

당신은 매우 당신의 CSS를 – chiliNUT

답변

1

문제는 애니메이션 기능입니다. 당신의 인수에 옵션을 설정해야합니다. 대신

{'left' : left_indent},{queue:false, duration:500},function(){ 

이용

:

여기
{'left' : left_indent},{queue:false, duration:500, complete: function(){ 

가 작동 예입니다 이 https://jsfiddle.net/ufcmos2y/

+0

감사를 제공 할 수 있습니다, 작품! –

관련 문제