jQueryカルーセルが反復しない

Question

私は自分のサイトのカルーセルを作成しようとしていて、スライドをリストの後ろに移動させるのに問題があるので、空白のない連続ストリームです。

<div class="maskleft"></div> 
<div class="maskright"></div> 

<div class="slideshow"> 
    <div class="views-row views-row-1 views-row-odd views-row-first"> 
     <div class="panel-text">text</div> 
     <div class="views-field views-field-field-image-feature"> 
      <img typeof="foaf:Image" src="" alt="" /> 
     </div> 
     <img typeof="foaf:Image" src="" alt="" /> 
    </div> 

    <div class="views-row views-row-2 views-row-even"> 
     <div class="panel-text">text</div> 
     <div class="views-field views-field-field-image-feature"> 
      <img typeof="foaf:Image" src="" alt="" /> 
     </div> 
     <img typeof="foaf:Image" src="" alt="" /> 
    </div> 

    <div class="views-row views-row-3 views-row-odd"> 
     <div class="panel-text">text</div> 
     <div class="views-field views-field-field-image-feature"> 
      <img typeof="foaf:Image" src="" alt="" /> 
     </div> 
     <img typeof="foaf:Image" src="" alt="" /> 
    </div> 

    <div class="views-row views-row-4 views-row-even views-row-last"> 
     <div class="panel-text">text</div> 
     <div class="views-field views-field-field-image-feature"> 
      <img typeof="foaf:Image" src="" alt="" /> 
     </div> 
     <img typeof="foaf:Image" src="" alt="" /> 
    </div> 
</div> 

jQueryのです：

function slideChange() { 
    var $slider = $('.slideshow'); 

    var $next = $slider.next().length ? $slider.next() : $('.slideshow'); 

    $next.animate({marginLeft: '-=1024'}, 1000, function() { 
    }); 
} 

$(document).ready(function() { 
    setInterval("slideChange()", 5000); 
}); 

ライブのdevのサイトはここにある：あなたが唯一のdiv whitch動いているhttp://dev.shoeboxdesign.co.uk/

Answer 1

1. 、なぜあなたを行うここでは、コードですこのコードが必要です：

   var $next = $slider.next().length ? $slider.next() : $('.slideshow'); 
   

2. あなたはスライドショーの最後に到達したときに、あなたのmarginLeftスタイルをリセットする必要があります。

   if (... check the end of slideshow ...) { // could be calculation of the widht, count of slides, etc. 
       $slider.css({marginLeft: '0'}); 
   } 
   

Answer 2

私はあなたが権利を取得した場合、あなたはあなたが持っているので、スライドショーの最後に最初のスライドを追加したいですストップ・カットの代わりに一定の流れを開始します。 これが正しいと仮定すると、重要なキーワード：の末尾にが追加されました。

最初のスライドを仮想的に撮り、最後のスライドに追加する必要があります。すべてのアニメーションステップでこれを行います。私たちはこのようなことに終わります。

function slideChange() { 
    var $slider = $('.slideshow'); 
    var $first = $slider.first(); 

    $slider.append($first); // Append a copy of the first slide to the last one 
    $slider.animate({marginLeft: '-=1024'}, 1000, function() { 
     $first.remove(); // Remove the first slide we just copied. So we virtually swapped the slide from the first to the last place 
     $slider.css({marginLeft: '+=1024'}); // Reset the margin 
    }); 

} 

このソリューションはテストされていませんが、このトリックを行う必要があります。 しかし、あなたのコードにはまだいくつかの問題があります。

このをこのスライダにのみ使用しますか？答えが「はい」の場合は、スライダーに#idを明示的に指定し、.classセレクターは指定しないでください。もう一度どこでも関数を使用するわけではないので、一般にアクセス可能な関数は必要ありません。あなたはそれを匿名で作ることができ、いくつかのリソースを節約できます。

​​