從無限

Question

開始如上圖草圖開始自動圖像滑塊，我需要一個滑塊畫廊其中四個圖像滑動到左逐個自動。第四張照片離開後，第一張照片彷彿是第五張。

我怎樣才能實現這個目標，沒有任何插件，只是CSS和一點點JavaScript？

Answer 1

的想法是在同一時間插入圖片一成HTML，並讓他們承擔旗幟的功能，我們不能在HTML重複什麼棘手的一部分，所以keyframe應該用來製作動畫，

檢查article了完整的解決方案，而live demo

Answer 2

請檢查下面的代碼

<script type="text/javascript" src="js/jquery.flexislider.js"></script> 

<div id="slider"> 
    <div id="imageloader" style="display: none;"> 
     <img src="images/header-logos_04.jpg" /> 
    </div> 
    <img src="images/header-logos_04.jpg" /> 
    <img src="images/header-logos_05.jpg" /> 
    <img src="images/header-logos_02.jpg" /> 
    <img src="images/header-logos_03.jpg" /> 
    <img src="images/header-logos_02.jpg " /> 
    <img src="images/header-logos_03.jpg" /> 

</div> 

jquery.flexislider.js

jQuery(window).load(function(){ 
pic = jQuery("#slider").children("img"); 
numImgs = pic.length; 
arrLeft = new Array(numImgs); 

for (i=0;i<numImgs;i++){ 

    totalWidth=0; 
    for(n=0;n<i;n++){ 
     totalWidth += jQuery(pic[n]).width(); 
    } 

    arrLeft[i] = totalWidth; 
    jQuery(pic[i]).css("left",totalWidth); 
} 

myInterval = setInterval("flexiScroll()",speed); 
jQuery('#imageloader').hide(); 
jQuery(pic).show(); 
}); 

function flexiScroll(){ 

for (i=0;i<numImgs;i++){ 
    arrLeft[i] -= 1;   

    if (arrLeft[i] == -(jQuery(pic[i]).width())){ 
     totalWidth = 0; 
     for (n=0;n<numImgs;n++){ 
      if (n!=i){ 
       totalWidth += jQuery(pic[n]).width(); 
      }   
     } 
     arrLeft[i] = totalWidth; 
    }     
    jQuery(pic[i]).css("left",arrLeft[i]); 
} 
} 

Answer 3

看看這個：http://codepen.io/jinukurian7/pen/JXbWEK

使用jQuery和Bootstrap實現這個滑塊。