js无缝滚动

最新推荐文章于 2021-07-15 10:21:02 发布

future_安然

最新推荐文章于 2021-07-15 10:21:02 发布

阅读量179

点赞数 2

分类专栏： javascript 前端

本文链接：https://blog.csdn.net/u010085702/article/details/78858550

版权

前端同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

javascript

4 篇文章 0 订阅

订阅专栏

在做无缝滚动的动画前，我们先来了解两个属性：offsetwidth、offsetleft

offsetwidth 该属性的值只与该元素有关，与周围的元素（父级与子级元素无关。）

offsetwidth = slef.width + slef.padding*2 + slef.border*2 （注：与自身的margin无关）

offsetleft该属性与父级元素有关，也与自身的marginLeft有关

offsetLeft= pardent.marginLeft +pardent.borderWidth+ pardent.paddingWidth + self.marginLeft;

代码示例：

    <style type="text/css">
     body {
            border:20px solid yellow;
            margin:20px;
            padding:40px;
            background:#d1d1d1;
        }
        #test {
            width:400px;
            height:200px;
            padding:20px;
            background:blue;
            border:5px solid red;
        }
    </style>
</head>
<body>
<div id="test"></div>
    <script>
        var test = document.getElementById("test");
        test.innerHTML = "<p>offsetWidth:" + test.offsetWidth + "</p>" +
                        "<p>offsetHeight:"+test.offsetHeight+"</p>"+
                        "<p>offsetLeft:"+test.offsetLeft+"</p>"+
                        "<p>offsetTop:"+test.offsetTop+"</p>";
    </script>
</body>

代码结果展示：

这里写图片描述

js无缝滚动代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{margin: 0px;padding: 0px}
        #sliderWrap{overflow:hidden;width: 900px;position: relative;height: 300px;box-sizing:border-box;background: red;margin: 50px auto}
        #sliderWrap ul{position: absolute;left: 0;box-sizing:border-box;}
        #sliderWrap ul li{float: left;list-style: none;width: 450px;height: 300px;border: 1px solid #fff;box-sizing: border-box}
    </style>
</head>
<body>
<div id="sliderWrap">
    <ul>
        <li><img src="img/1.jpg"></li>
        <li><img src="img/2.jpg"></li>
    </ul>
    <script>
        window.onload = function () {
            var oSlider = document.getElementById('sliderWrap');
            var oUl = oSlider.getElementsByTagName('ul')[0];
            var aLi = oUl.getElementsByTagName('li');
            //把轮播图内容复制一份
            oUl.innerHTML = oUl.innerHTML+oUl.innerHTML;
            //设置ul的长度为li的总长度,便于移动
            oUl.style.width = aLi[0].offsetWidth*aLi.length+'px';
            var timer;
            var moveLeft = function () {
                timer = setInterval(function () {
                    //每隔30毫秒向左移动2px
                    oUl.style.left = oUl.offsetLeft - 2 +'px';
                    if(oUl.offsetLeft < -(oUl.offsetWidth/2)){
                        //当向左移动一半时瞬速将位移设置为0
                        oUl.style.left =0+'px'
                    }
                },30)
            }
            for(var i=0;i<aLi.length;i++){
                /**
                 * 鼠标移入暂停滚动
                 */
                aLi[i].onmouseover = function () {
                    clearInterval(timer);
                }
                /**
                 * 鼠标移出继续滚动
                 */
                aLi[i].onmouseout = function () {
                    moveLeft();
                }
            }
        }
    </script>
</div>
</body>
</html>