第三十二节 JavaScript无缝滚动 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }

        .list_con{
            width: 1000px;
            height: 200px;
            border: 1px solid #000;
            margin: 10px auto 0;
            background-color: #f0f0f0;
            position: relative;
            overflow: hidden;
        }

        .list_con ul{
            list-style: none;
            width: 2000px;
            height: 200px;
            position: absolute;
            left: 0;
            top: 0;
        }

        .list_con li{
            width: 180px;
            height: 180px;
            float: left;
            margin: 10px;
        }

        .btns_con{
            width: 1000px;
            height: 30px;
            margin: 50px auto 0;
            position: relative;
        }

        .left,.right{
            width: 30px;
            height: 30px;
            background-color: gold;
            position: absolute;
            left: -40px;
            top: 124px;
            font-size: 30px;
            line-height: 30px;
            color: #000;
            font-family: 'Arial';
            text-align: center;
            border-radius: 15px;
            cursor: pointer;
            opacity: 0.5;
        }

        .right{
            left: 1010px;
            top: 124px;
        }
    </style>
    <script type="text/javascript">
        window.onload = function(){
            var oDiv = document.getElementById('slide')
            var oUl = document.getElementsByTagName('ul')[0];
            var oBtn01 = document.getElementById('btn01');
            var oBtn02 = document.getElementById('btn02');

            oUl.innerHTML += oUl.innerHTML;
            // 再copy一份li元素，总共变成10个li元素
            var iLeft = 0;
            var iSpeed = 2;
            var iNowspeed = 0;
            function moving(){
                iLeft += iSpeed;
                // 当向左拉动完10个li时，瞬间将left拉到第五个图片结尾，以便无缝继续滚动
                if(iLeft<-1000){
                    iLeft = 0;
                }

                if(iLeft>0){
                    iLeft = -1000;
                }
                oUl.style.left = iLeft + 'px';
            }
            var timer = setInterval(moving,30);
            oBtn01.onclick = function(){
                iSpeed = -2;
            }
            oBtn02.onclick = function(){
                iSpeed = 2;
            }


            // 鼠标停留事件onmouseover
            oDiv.onmouseover = function(){
                iNowspeed = iSpeed;
                iSpeed = 0;
            }

            // 鼠标离开事件onmouseover
            oDiv.onmouseout = function(){
                iSpeed = iNowspeed;
            }    
        }
    </script>
</head>
<body>
    <div class="btns_con">
        <div class="left" id="btn01">&lt;</div>
        <div class="right" id='btn02'>&gt;</div>
    </div>

    <div class="list_con" id="slide">
        <ul>
            <li><a href="#"><img src="images/goods001.jpg" alt="商品图片"></a></li>
            <li><a href="#"><img src="images/goods002.jpg" alt="商品图片"></a></li>
            <li><a href="#"><img src="images/goods003.jpg" alt="商品图片"></a></li>
            <li><a href="#"><img src="images/goods004.jpg" alt="商品图片"></a></li>
            <li><a href="#"><img src="images/goods005.jpg" alt="商品图片"></a></li>
        </ul>
    </div>
</body>
</html>

 

posted @ 2020-03-14 17:14  kog_maw  阅读(94)  评论(0)    收藏  举报