重複水平自動滾動條

我有一個自動滾動欄腳本，使圖像向右滾動。我想在結束後重復它。請幫忙！重複水平自動滾動條

<div class="scrolls"> 
    <div> 
     <img src="img1" height="200"/> 
     <img src="img2" height="200"/> 
     <img src="img3" height="200"/> 
    </div>   
</div> 

<script> 
    $(document).ready(function() { 
     var sL = 4000; 
     $('.scrolls').animate({ 
      scrollLeft : sL 
     },100000, 'linear'); 

     $(".scrolls").on("click",function(){ 
       $(this).stop(true,false); 
     }); 

     $(".scrolls").on("mouseenter",function(){ 
      $(this).stop(true,false); 
     }); 

     $(".scrolls").on("mouseleave",function(){ 
      $(this).animate({ 
      scrollLeft : sL 
      },100000, 'linear'); 
     }); 
    }) 
    </script>

來源

2017-08-25 Fabian Obersovszky

採取與時listItems（HTML標記）的無序列表

<div class="scrolls"> 
    <ul> 
     <li><img src="img1" height="200"/></li> 
     <li><img src="img2" height="200"/></li> 
     <li><img src="img3" height="200"/></li> 
    </ul> 
</div>

拷貝時listItems這樣你就可以fillup整體水平空間的兩倍。現在向右滾動div，每當圖像離開div到左側時，將它從開始移動到結尾。

// create as many copys as needed for filling the whole harizontal space twice 
var dummyClones = $('.scrolls > ul > li').clone(true); 
while($('.scrolls > ul').width() < 2*$('.scrolls').width()) 
    $('.scrolls > ul').append(dummyClones.clone(true));

動畫本身是通過window.requestAnimationFrame解決：

var animationSpeedInMiliseconds = 10000; // 10 seconds for 1000px 
function step(timestamp) { 
    if(!step.startTimestamp) step.startTimestamp = timestamp; 
    if(!step.stopped) { 
     let delta = timestamp - step.startTimestamp; 
     let pixelCountToShift = (delta/animationSpeedInMiliseconds) * 1000; 
     if($('.scrolls').scrollLeft()+pixelCountToShift > $('.scrolls > ul > li:eq(0)').width()) { 
      $('.scrolls > ul').append($('.scrolls > ul > li:eq(0)')); 
      $('.scrolls').scrollLeft($('.scrolls').scrollLeft()+pixelCountToShift-$('.scrolls > ul > li:eq(0)').width()); 
     } else { 
      $('.scrolls').scrollLeft($('.scrolls').scrollLeft()+pixelCountToShift); 
     } 
    } 
    step.startTimestamp = timestamp; 
    window.requestAnimationFrame(step); 
}

注意：它並不完美。這是我在4分鐘內創建的一個例子，它應該被理解爲概念驗證。不是用於生產用途的腳本。

的jsfiddle：https://jsfiddle.net/Kasalop/tktfr4rz/2/

來源

2017-08-26 00:32:57

請嘗試使用片段是可能的。 – Keith

@Keith不是一個片段的粉絲（我的瀏覽器安全策略無論如何都會阻止它們），但我保證將來我會繼續使用片段。 –

重複水平自動滾動條

回答

相關問題