強制無縫循環的jQuery自動收報器腳本

Question

我正在使用jQuery自動收報器類型的腳本。但它有一個特殊問題，因爲它不會無縫循環。它循環圖像，然後有一個空白區域，然後再次循環。我希望它在最後一張圖像和第一張圖像之間的距離相同的無限循環中循環。

我已經嘗試了CSS與明智的孩子div的邊緣等玩，但無法獲得腳本來消除週期之間的空白空間。有沒有辦法讓這個腳本以無縫方式循環？

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();