原生js的图片.文字.小框的跑马灯效果及弹幕效果

最新推荐文章于 2024-06-17 15:29:34 发布

陈乾cQQ

最新推荐文章于 2024-06-17 15:29:34 发布

阅读量714

点赞数 2

分类专栏： Javascript 文章标签：前端 es6 javascript js html5

本文链接：https://blog.csdn.net/weixin_49299412/article/details/108278139

版权

本文介绍了如何使用原生JavaScript实现图片、文字和小框的跑马灯效果，同时还提供了一个基于小框跑马灯的弹幕效果。通过调整样式，可以适应不同数量的元素，实现循环播放的视觉体验。代码已给出，欢迎读者尝试并指正。

摘要由CSDN通过智能技术生成

笔者在最近的一个点上项目中使用原生js遇到一个跑马灯效果,需要图片循环播放,可以根据图片的多少改变一定的样式,从而实现跑马灯效果。于是把图片的,文字的和另一种小框的都整合了一下,顺便基于小框的跑马灯增加了一个类似弹幕效果,下面直接上代码(原生js)。

一.图片跑马灯

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
   
            min-height: 250px;
            margin: 100px auto;
            position: relative;
            overflow: hidden;
        }

        ul {
   

            position: absolute;
        }

        li {
   
            list-style: none;
            float: left;
            width: 350px;
            margin-right: 10px;
        }
    </style>
</head>

<body>


    <div class="box">
        <ul class="goods">
            <li>
                <a href="javascript:">
                    <img src="./goods19.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="javascript:">
                    <img src="./goods18.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="javascript:">
                    <img src="./goods17.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="javascript:">
                    <img src="./goods16.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="javascript:">
                    <img src="./goods15.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="javascript:">
                    <img src="./goods14.jpg" alt="">
                </a>
            </li>
        </ul>
    </div>

    <script>
        let box = document.querySelector('.box');
        let ulObj = document.querySelector('.goods');
        let liArr = ulObj.children;

        let newUl = ulObj.cloneNode(true);
        box.appendChild(newUl); //添加克隆元素

        let wid = (liArr[0].offsetWidth + 10) * liArr.length + 'px'; //获取ul宽度
        newUl.style.left = wid; //克隆的ul的位置
        //console.log(newUl.style.left);

        var timer = setInterval(sta, 30); //设置定时器 一开始就动起来

        function sta()

最低0.47元/天解锁文章

陈乾cQQ

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
原生js的图片.文字.小框的跑马灯效果及弹幕效果

笔者在最近的一个点上项目中使用原生js遇到一个跑马灯效果,需要图片循环播放,可以根据图片的多少改变一定的样式,从而实现跑马灯效果,于是把图片的,文字的和另一种小框的都整合了一下,顺便基于小框的跑马灯增加了一个类似弹幕效果,下面直接上代码(原生js).
复制链接

扫一扫

专栏目录