JS+CSS 轮播通知效果

使用JS+CSS实现一个简单的轮播通知

效果图

html

<div>
  <ul id="notification">
      <li>通知1</li>
      <li>通知2</li>
      <li>通知3</li>
      <li>通知4</li>
      <li>通知5</li>
  </ul>
</div>

CSS部分

* {
    margin: 0px;
    padding: 0px;
}
body {
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
    overflow: hidden;
}
div {
    margin: 100px 200px;
    width: 100px;
    height: 1.25rem;
    line-height: 1.25rem;
    padding-left: 5px;
    background-color: #ccc;
    overflow: hidden;
}
div > ul {
    list-style-type: none;
    /* 使用相对定位 */
    position: relative;
    /* 动画 */
    transition: top 1s;
}

JS部分

const notifications = document.getElementById('notification')
// 切换时间间隔秒
const switchDelay = 3
// 最小索引值
const min = 0
// 最大索引值
const max = notifications.childElementCount - 1
// 因为setInterval一开始就执行一次
// 将index设置为-1，保证第一条数据能够正常展示
let index = -1
// 5s切换一次
setInterval(() => {
    index = index >= max ? min : index + 1
    notifications.style.top = `${-100 * index}%`
}, Number.parseInt(switchDelay) * 1000)