HTML + CSS + JS 元素循环滚动

 

<!DOCTYPE html>
<html lang="zh">
<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>HTML + JS 元素循环滚动 XMSB</title>
    
    <style type="text/css">
        *
        {
            margin: 0px;
            padding: 0px;
        }
    
        #oBox
        {
            width: 80%;
            margin: 10px auto;
            overflow: hidden;
            
            border: 1px solid black;
        }
        
        #scUl
        {
            position: relative;
            width: calc(100% * 2);
        }
        
        .scLi
        {
            list-style: none;
            
            float: left;
            padding: 20px;
            margin: 20px;
            
            width: calc(50% / 4 - 82px); 
            border: 1px solid black;
            
            text-align: center;
        }
        
        .scLi:hover
        {
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="oBox">
        <ul id="scUl">
            <li class="scLi">1</li>
            <li class="scLi">2</li>
            <li class="scLi">3</li>
            <li class="scLi">4</li>
            
            <li class="scLi">1</li>
            <li class="scLi">2</li>
            <li class="scLi">3</li>
            <li class="scLi">4</li>
        </ul>
    </div>
    
    <script type="text/javascript">
        window.onload = function()
        {
            var scUl = document.getElementById('scUl');
            var oBoxWidth = document.getElementById('oBox').offsetWidth;
            var x = 0;
            
            function timerF()
            {
                scUl.style.left = x + 'px';
                
                if(x == ~oBoxWidth + 1)
                {
                    x = 0;
                }
                else
                {
                    x --;
                }
            }
            
            var timer = setInterval(timerF, 5);
            
            var scLi = document.getElementsByClassName('scLi');
            for(let i = 0; i < scLi.length; i ++)
            {
                scLi[i].onmouseover = function()
                {
                    clearInterval(timer);
                }
                scLi[i].onmouseout = function()
                {
                    timer = setInterval(timerF, 5);
                }
            }
        }
    </script>
</body>
</html>

 

posted @ 2021-07-30 09:31  何效名  阅读(251)  评论(0)  编辑  收藏  举报