jQueryティッカースクリプトのシームレスなループを強制します。

Question

私はjQueryティッカータイプのスクリプトを使用しています。それは、シームレスにループしないという点で、特に問題があります。それは画像を循環させ、空白があり、次にそれが再び循環する。最後の画像と最初の画像との間の距離が同じで無限ループで循環したいと思います。

私は子供用divなどの余白で遊んでCSSを試しましたが、サイクル間の空白スペースを削除するスクリプトを取得できません。このスクリプトをシームレスにループさせる方法はありますか？

JSFiddleデモhtmlのスクリプトです。

スクリプト自体：

function marquee(a, b) { 
    var width = b.width(); 
    var start_pos = a.width(); 
    var end_pos = -width; 

    function scroll() { 
     if (b.position().left <= -width) { 
      b.css('left', start_pos); 
      scroll(); 
     } 
     else { 
      time = (parseInt(b.position().left, 10) - end_pos) * 
       (10000/(start_pos - end_pos)); // Increase or decrease speed by changing value 10000 
      b.animate({ 
       'left': -width 
      }, time, 'linear', function() { 
       scroll(); 
      }); 
     } 
    } 

    b.css({ 
     'width': width, 
     'left': start_pos 
    }); 
    scroll(a, b); 

    b.mouseenter(function() {  // Remove these lines 
     b.stop();     // 
     b.clearQueue();   // if you don't want 
    });       // 
    b.mouseleave(function() {  // marquee to pause 
     scroll(a, b);    // 
    });       // on mouse over 

} 

$(document).ready(function() { 
    marquee($('#band'), $('#band-content')); //Enter name of container element & marquee element 
}); 

Answer 1

することはでき代替として、このプラグイン：Demo

スタイル：

#band { 
    position:relative; 
    width:1022px; 
    height:120px; 
    line-height:120px; 
    overflow:hidden; 
    background:blue; 
} 
#band-content { 
    position:absolute; 
    height:120px; 
    line-height:120px; 
    overflow:hidden; 
} 
#band-content img { 
    position:relative; 
    top:-1px; 
    height:68px; 
    vertical-align:middle; 
    margin-right:68px; 
} 

.a { 
    overflow: hidden; 
} 

.a1{ 
    list-style: none; 
} 

.a li {  
    float: left; 
} 

HTML：

<div id="band" class="a"> 
       <ul id="band-content" class="a1"> 
        <li><img src=""></li> 
        <li><img src=""></li> 
        <li><img src=""></li> 
        <li><img src=""></li> 
        <li><img src=""></li> 
        <li><img src=""></li> 
        <li><img src=""></li> 
        <li><img src=""></li> 
        <li><img src=""></li> 
       </ul> 
      </div> 

jQueryのコード：

$("#band").scrollForever();