無間隙輪播圖片

時間 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

運行結果：佈局

相關標籤/搜索