原生JS-无缝滚动-1.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>原生JS-无缝滚动-1</title>
    <script type="text/javascript">
        // 总共分了10份,准备给content 10份
        setRem();
        window.onresize = setRem;
        function setRem() {
            document.getElementsByTagName('html')[0].style.fontSize = document.documentElement.clientWidth / 10 + 'px';
        }
    </script>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        body{
            background-color: coral;
        }
        #div1{
            width: 10em;
            height: 2.4rem;
            margin: 0 auto;
            position: relative;
            background-color: cornflowerblue;
            overflow: hidden;
        }
        #div1 ul{
            position: absolute;
            top:0;
            left: 0;
        }
        #div1 ul li{
            list-style: none;
            float: left;
            width: 2.93333rem;
            height: 2rem;
            background-color: aquamarine;
            margin: 0.2rem;

        }
        #div1 ul li img{
            /*width: auto;
            height: auto;
            max-width: 100%;
            max-height: 100%;*/
            width: 2.93333rem;
            height: 2rem;

        }
    </style>
</head>
<body>
<div id="div1">
    <ul>
        <li><img src="img/1.jpg" alt=""/></li>
        <li><img src="img/2.jpg" alt=""/></li>
        <li><img src="img/3.jpg" alt=""/></li>
        <li><img src="img/1.jpg" alt=""/></li>
    </ul>
</div>
</body>
</html>