无间隙轮播图片

时间 2019-11-20

标签间隙图片繁體版

原文原文链接

轮播图片在页面布局中运用普遍，下面是一个简单的示例：

示例代码：css

<html>
<head>
<style type="text/css">
*{
    margin:0px;
    padding:0px;
}
#outer{
    width: 600px;
    overflow:hidden;
    
    
    
    
}
#inner{
    width: 3000px;
    
    
    
}
img{
    width:300px;
    
    float:left;
}
</style>
</head>
<body>

<div id="outer">
    <div id="inner">
    <!--控制的实际上是两个图片
    外部outer的div的宽度是所控制图片的总宽度
    -->
        <img src="1.jpg"/>
        <img src="2.jpg"/>
        <img src="1.jpg"/>
        <img src="2.jpg"/>
    </div>
</div>
<script>
    var s = setInterval(function(){
        var outer = document.getElementById("outer");
        if(outer.scrollLeft>=600){
            outer.scrollLeft = 0;
        }else{
            outer.scrollLeft+=2;
        }
    },10);
</script>
</body>

</html>

注：这里只有两张图片在轮播，但实际上却放了四张图片，也就是说，一样的图片须要放两张，才能实现无缝隙轮播。html

运行结果：布局