【JavaScript】用原生js实现无缝滚动的实例

最新推荐文章于 2023-07-25 17:05:03 发布

meichaoWen

最新推荐文章于 2023-07-25 17:05:03 发布

阅读量258

点赞数

分类专栏： JS实例文章标签： js javascript

本文链接：https://blog.csdn.net/meichaoWen/article/details/112301052

版权

JS实例专栏收录该内容

60 篇文章 2 订阅

订阅专栏

无缝滚动

功能：向左滑、向右滑、鼠标移入滑动暂停、鼠标移出滑动继续。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {padding: 0; margin: 0; }
        #div1 {width: 1200px; height: 300px; background: red; margin: 100px auto; position: relative; overflow: hidden;}
        #div1 ul {position: absolute; left: 0; top: 0;}
        #div1 ul li {list-style: none; width: 300px; height: 300px; float: left;}
        #div1 img {width: 100%;}
    </style>
</head>

<body>
    <input type="button" value="向左走" id="btn1">
    <input type="button" value="向右走" id="btn2">
    <div id="div1">
        <ul>
            <li><img src="img1.jpg"></li>
            <li><img src="img2.jpg"></li>
            <li><img src="img3.jpg"></li>
            <li><img src="img4.jpg"></li>
        </ul>
    </div>
    <script>
        window.onload = function () {
            var oDiv = document.getElementById('div1')
            var oUl = oDiv.getElementsByTagName('ul')[0]
            var aLi = oUl.getElementsByTagName('li')
            var oBtn1 = document.getElementById('btn1') //向左走
            var oBtn2 = document.getElementById('btn2') //向右走
            var timer = null
            var turn = 5 //用来控制方向，-5向左 5向右
            oUl.innerHTML += oUl.innerHTML //将li元素复制
            oUl.style.width = aLi[0].offsetWidth * aLi.length + 'px';
            function move() {
                if (oUl.offsetLeft < -oUl.offsetWidth / 2) { //向左走，当滑动到一半时
                    oUl.style.left = '0px'
                }
                if (oUl.offsetLeft > 0) { //向右走
                    oUl.style.left = -oUl.offsetWidth / 2 + 'px'
                }
                oUl.style.left = oUl.offsetLeft + turn + 'px'
            }
            timer = setInterval(move, 30)
            oDiv.onmouseover = function () {
                clearInterval(timer)
            }
            oDiv.onmouseout = function () {
                timer = setInterval(move, 30)
            }
            oBtn1.onclick = function(){
                turn = -5
            }
            oBtn2.onclick = function(){
                turn = 5
            }

        }
    </script>

</body>

meichaoWen

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【JavaScript】用原生js实现无缝滚动的实例

无缝滚动功能：向左滑、向右滑、鼠标移入滑动暂停、鼠标移出滑动继续。<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * {padding: 0; margin:
复制链接

扫一扫