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

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>
  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值