从头开始无限的自动图像滑块

Question

如上面的草图所示，我需要一个滑块库，其中四个图像会自动一张一张地向左滑动。 当第四个图像离开时，第一个图像就好像是第五个图像一样。

在没有任何插件，只有CSS和一点点JavaScript的情况下，如何实现这一目标？

Answer 1

请检查下面的代码

<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 2

我们的想法是将图像一次插入HTML并让它们承担横幅功能，这一棘手的部分是我们无法在HTML中重复任何内容，因此应使用关键帧对其进行动画处理，

查看该文章以获取完整的解决方案以及该实时演示