JavaScript - 无缝滚动（不好使坏的） -_无缝滚动为什么不会滚动-CSDN博客

这里写图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style media="screen">
    * { padding: 0; margin: 0; }
    li { list-style: none; }

    .roll { width: 698px; height: 108px; margin: 50px auto 0; position: relative; }
    .btn_left { display: block; width: 68px; height: 68px; background: url(images/btn.jpg) no-repeat -70px -69px; position: absolute; top: 20px; left: 1px; z-index: 1; }
    .btn_left:hover { background: url(images/btn.jpg) no-repeat -70px 0; }
    .btn_right { display: block; width: 68px; height: 68px; background: url(images/btn.jpg) no-repeat 1px -69px; position: absolute; top: 20px; right: 0; z-index: 1; }
    .btn_right:hover { background: url(images/btn.jpg) no-repeat 1px 0; }
    .roll .wrap { width: 546px; height: 108px; margin: 0 auto; position: relative; overflow: hidden; }
    .roll ul { position: absolute; top: 0; left: 0; }
    .roll li { float: left; width: 182px; height: 108px; text-align: center; }
    .roll li a:hover { position: relative; top: 2px; }

    .control { border-bottom: 1px solid #ccc; background: #eee; text-align: center; padding: 20px 0; display: none; }
    </style>
</head>
<body>
    <div class="roll" id="roll">
        <a href="javascript:void(0);" class="btn_left"></a>
        <a href="javascript:void(0);" class="btn_right"></a>
        <div class="wrap">
            <ul>
                <li><a href="javascript:void(0)"><img src="images/1.jpg"></a></li>
                <li><a href="javascript:void(0)"><img src="images/2.jpg"></a></li>
                <li><a href="javascript:void(0)"><img src="images/3.jpg"></a></li>
                <li><a href="javascript:void(0)"><img src="images/4.jpg"></a></li>
            </ul>
        </div>
    </div>
    <script type="text/javascript">
        window.onload = function () {
            var oDiv = document.getElementById('roll');
            var oUl = oDiv.getElementsByTagName('ul')[0];
            var aLi = oUl.getElementsByTagName('li');
            var iSpeed = -5;
            var aBtn = oDiv.getElementsByTagName('a');

            oUl.innerHTML += oUl.innerHTML;

            oUl.style.width = aLi[0].offsetWidth * aLi.length + 'px';

            setInterval(function () {
                oUl.style.left = oUl.offsetLeft + iSpeed +'px';  //向左移动是负数 、向右移动是正数

                if (oUl.offsetLeft < -oUl.offsetWidth/2) {
                    oUl.style.left = '0px';
                }else if (oUl.offsetLeft > 0) {
                    oUl.style.left =-oUl.offsetWidth/2;
                }
            },30);
            aBtn[0].onmouseover = function () {
                iSpeed = -5;
            }
            aBtn[1].onmouseover = function () {
                iSpeed = 5;
            }
        }
        // offsetLeft  //左边距
        // offsetTop   //上边距
        // offsetWidth  //宽度
        // offsetHeight //高度
    </script>
</body>
</html>