0

私は自分のjQueryカルーセルを持っていますが、クリスマスイブに突然動作しなくなり、その理由がわかりません。基本的なセマンティック構造は単純です。

<section class = "slideshow">
   <div id = "slides">
      <ul>
          <li id = "slide_1">
             <div class = "slide">
                 <div >
                     content for slide 1
                  </div>                 
             </div>
          </li>
          <li>
             <div class = "slide">
                 <div >
                     content for slide 2
                 </div>                 
             </div>
          </li>
      </ul>
   </div>
</section>
<input type = "button" value = ">>" id = "forward"/>​

対応する jQuery は次のとおりです。

$('#forward').click(slideup);

function slideup()
{

 var item_width = $('#slides li').outerWidth(true);
 var old_left = parseInt($('#slides ul').css('left'));
 var left_indent = old_left - item_width;

 $('#slides ul').animate({'left':left_indent},"slow", function(){      
   $('#slides li:last').after($('#slides li:first'));
       $('#slides ul').css({'left':0});
   } ); 
}

しかし、何も起こっていません。CSSもキャプチャするjsフィドルを次に示します。

http://jsfiddle.net/bbCab/8/

ありがとう!

PS: メリー クリスマス Stackoverflowers :)

4

1 に答える 1

2

margin-left をアニメーション化してみてください:

$('#slides ul').animate({'left':left_indent},"slow", function(){

に

$('#slides ul').animate({'margin-left':left_indent},"slow", function(){

テスト: http://jsfiddle.net/bbCab/16/

于 2012-12-25T18:33:57.683 に答える