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

原创

已于 2023-06-28 18:01:09 修改 · 1.3k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #css3 #css

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

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