【原生JS】web原生文字轮播效果

dongdong咚咚咚

已于 2023-06-28 18:01:09 修改

阅读量1.1k

点赞数 1

分类专栏： JS 文章标签：原生JS 文字轮播无限循环 CSS样式 JavaScript动画

于 2022-02-06 21:57:35 首次发布

本文链接：https://blog.csdn.net/dongzhensong/article/details/122801303

版权

JS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

2020年在公司的老项目（原生JS）中有开发文字轮播的需求，网上找了很多方案，总有一些美中不足的细节问题。研究了半天时间，最终开发出一套个人满意的原生JS的文字轮播效果。
效果如下（简要概括就是：无限轮播，丝滑切换，效果杠杠）：
在这里插入图片描述

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>优化后的文字轮播</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <style type="text/css">
        #rolling_noti{
            width: 100%;
            height: 45px;
            background: #FCFE7B;
            display: flex;
        }

        .box{
            -webkit-flex: 1;
            flex: 1;
        }

        #right_div{
            display: inline-block;
            background: url("source/close.jpeg") no-repeat right;
            padding-right: 36px;
            line-height: 36px;
        }

        .winBox{
            font-family: PingFangSC-Regular;
            font-size: 14px;
            color: #FF721F;
            letter-spacing: 0;
            text-align: left;
            height: 40px;
            overflow: hidden;
            position: relative;

        }

        /*解决安卓机型下最后一个li会换行的问题，ul设置不换行，li设置display:inline-block*/
        #scroll_loudspeaker{
            /*注意：width的真实值是由内部li的长度与数量决定的。*/
            width: 900px;
            position: absolute;
            left: 0;
            top: 0;
            white-space: nowrap;
            margin: 0;

        }

        #scroll_loudspeaker li{
            list-style: none;
            display: inline-block;
            line-height: 40px;
            text-align: left;
            overflow: hidden;
            text-decoration: none;
        }

        #rolling_noti span{
            display: inline-block;
            width: 25px;
            height: 25px;
        }

        .content_li{
            background-color: blue;
        }

        .li_div{
            background: url("source/loudspeaker.jpeg") no-repeat left;
            padding-left: 36px;
            line-height: 36px;
        }

    </style>
</head>
<body>

<div id="rolling_noti">
    <div id="rolling_div" style="-webkit-flex: 1;flex: 1;height: 100%;overflow: hidden;text-overflow: ellipsis;
                                -webkit-align-items: center;align-items: center;display: flex;white-space: nowrap">
        <div class="box">
            <div class="winBox">
                <ul id="scroll_loudspeaker">
                    fklsjfald
                </ul>
            </div>
        </div>
    </div>
    <div id="right_div" style=""></div>
</div>

<script type="text/javascript">

    var ulAnimateLeft = 0;

    function clearRollingNotiTimer(){

    }

    $("#scroll_loudspeaker").html("初始化中...");
    var _this = this;
    let noticeTips = ['张三 赢了1000元',"李四 赢了300元","王五 赢了870元"];
    let noticeLength = noticeTips.length;
    var lis = "";
    for (var i = 0; i < noticeLength; i++) {
        lis+= (  "<li class='content_li'>" +'<div class="li_div"><strong>'+noticeTips[i]+'</strong></div>' ) ;
    }
    // 无限循环轮播优化：在最后面添加一个li，呈现A-B-C-D-A的形式，D播放完成后到A
    if (noticeLength > 0) {
        lis+= (  "<li class='content_li'>" +'<div class="li_div"><strong>'+noticeTips[0]+'</strong></div>' ) ;
    }
    $('#scroll_loudspeaker').html(lis);
    clearRollingNotiTimer();

    let singleWidth = screen.width-50;
    // ABCD内容长度
    let infoUlLength = singleWidth * noticeLength;
    // ABCDA内容长度
    let ulLength = infoUlLength + singleWidth;
    // 设置动态ul长度
    $('#scroll_loudspeaker').css('width',ulLength+'px');
    $('.content_li').css('width',singleWidth+'px');
    console.warn("a,b",singleWidth,infoUlLength);

    // 注意页面消亡时应销毁timer，进入页面时重新初始化
    var timer = setInterval(function () {
        // 播放到最后一个的时候，转为播放第一个
        if(ulAnimateLeft== -infoUlLength){
            ulAnimateLeft = 0;
        }
        ulAnimateLeft-=1;
        console.info("ulAnimateLeft:",ulAnimateLeft);
        $('#scroll_loudspeaker').css({
            left:ulAnimateLeft
        })
    });

</script>
</body>
</html>

dongdong咚咚咚

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
【原生JS】web原生文字轮播效果

2020年在新公司的老项目（JS）中有开发文字轮播的需求，网上找了很多方案，总有一些美中不足的细节问题。研究了半天时间，最终开发出一套个人满意的原生JS的文字轮播效果。效果如下（简要为：无限轮播，丝滑切换）：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,
复制链接

扫一扫

专栏目录