消息滚动切换

CSS代码

<style>
      .tip-bar {
        display: inline-flex;
        align-items: center;
        height: 30px;
        background-color: rgba(0, 0, 0, 0.4);
        border-radius: 16px;
      }
      img {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        margin-right: 5px;
      }
      span {
        font-size: 13px;
        color: white;
        margin-right: 8px;
      }
    </style>

HTML代码

<div class="tip-bar">
      <img
        src="https://bfs.biyao.com/group1/M01/A2/67/rBACVGA_iOuAYaTxAAAPbted3yE165.png"
        alt=""
      />
      <span>183***138对这件商品感兴趣</span>
    </div>

JS代码

<script>
      // 1.从服务器拿到数据ajax/fetch请求
      let tipList = [
        {
          icon: "https://bfs.biyao.com/group1/M01/A6/97/rBACYWBCHqyAFH5tAAANZXX5Eww646.png",
          title: "coderwhy对这件商品感兴趣",
        },
        {
          icon: "https://bfs.biyao.com/group1/M01/A2/67/rBACVGA_iOuAYaTxAAAPbted3yE165.png",
          title: "123***814对这件商品感兴趣",
        },
        {
          icon: "https://bfs.biyao.com/group1/M00/7F/4E/rBACYV16HseAP-PnAAAW9bbVoKE463.png",
          title: "刘军对这件商品感兴趣",
        },
      ];

      // 2.动态的切换数据
      // 2.1. 获取元素
      var tipBar = document.querySelector(".tip-bar");
      var imgEl = tipBar.querySelector("img");
      var spanEl = tipBar.querySelector("span");

      // 2.1. 3s切换一次数据
      var currentIndex = 0; //记录当前展示到的索引位置
      setInterval(function () {
        // 1> 根据索引获取item
        var tipItem = tipList[currentIndex];

        // 2>给DOM设置内容
        imgEl.src = tipItem.icon;
        spanEl.textContent = tipItem.title;

        // 3>重新计算索引
        currentIndex++;
        if (currentIndex === tipList.length) {
          currentIndex = 0;
        }
      }, 3000);

      // 随机滚动，只写了随机值
      Math.floor(Math.random() * tipList.length);
    </script>