JS实现横版无缝滚动广告效果

很困的程序媛

已于 2022-12-29 14:51:16 修改

阅读量1.1k

点赞数

分类专栏： javascript 文章标签： javascript

于 2022-03-28 00:15:16 首次发布

本文链接：https://blog.csdn.net/m0_67372185/article/details/123785051

版权

javascript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        *{

            padding: 0;

            margin: 0;

            vertical-align: top;

        }

        #box{

            width: 840px;

            height: 200px;

            outline: 1px solid pink;

            margin: 50px auto;

            overflow: hidden;

        }

        img{

            height: 200px;

            width: 200px;

            border-radius: 10px;

        }

        .content{

            /* width: 100%; */

            height: 200px;

            display: flex;

            outline: 3px solid black;

            overflow: hidden;

            position: relative;

            top: 0;

            left: 0;

        }

        .item{

            border-radius: 10px;

            margin-right: 10px;

            height: 200px;

            width: 200px;

        }

    </style>

</head>

<body>

    <div id="box">

        <div class="content">

            <div  class="item">

                <img src="images/1.jpeg" alt=""></div>

            <div  class="item">

                <img src="images/2.jpeg" alt=""></div>

            <div  class="item">

                <img src="images/3.jpeg" alt=""></div>

            <div  class="item">

                <img src="images/4.jpeg" alt=""></div>  

        </div>

    </div>

</body>

<script>

    var speed = 4; //初始化速度

    //获取节点

    var Obox = document.getElementById("box");

    var Ocontent = document.getElementsByClassName("content")[0];

    console.log(Ocontent);

    var Oitem = document.getElementsByClassName("item");



    //图片内容

    Ocontent.innerHTML += Ocontent.innerHTML;



    //设置ul的宽度使图片可以放下

    Ocontent.style.width = Oitem.length*210 +'px';

    var changeLeft = 0;



    function move(){

        changeLeft-=speed;

        //Ocontent.offsetleft,往左偏移为负数

        //Ocontent.offsetwidth两组图的总宽度

        if(changeLeft<-(Ocontent.offsetWidth/2)){//向左滚动，当靠左的图4移出边框时

            Ocontent.style.left=0;

            changeLeft=0;

        }else{

            Ocontent.style.left = changeLeft + 'px';

        }

    }

    var timer = setInterval(move,30);//全局变量 ，保存返回的定时器

    // console.log(timer);



    Obox.addEventListener('mouseout', function () {

    timer = setInterval(move,30);

   },false);



    Obox.addEventListener('mousemove', function () {

    clearInterval(timer);//鼠标移入清除定时器

   },false);



   

</script>

</html>