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中重复任何内容的棘手部分，因此keyframe应该用于动画它，

检查article是否有完整的解决方案以及live demo

无限开始的自动图像滑块

2 个答案: