如何改成自动切换？

Question

现在的效果是鼠标悬浮文字切换背景图，如何改成.line自动往下滚动，滚动到下一个文字就切换当前文字的背景图，鼠标悬浮就停止滚动。

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        ul {
            list-style: none;
        }

        a {
            color: #000;
            text-decoration: none;
        }

        .box {
            margin: 0 auto;
            width: 1580px;
            height: 600px;
            position: relative;
            top: 60px;
            overflow: hidden;
        }

        .nav {
            position: absolute;
        }

        .nav>ul {
            padding: 45px 0 0 120px;
            height: 600px;
            position: relative;
            z-index: 10;
        }

        .nav::before {
            content: "";
            width: 1px;
            height: 600px;
            background-color: #ddd;
            position: absolute;
            left: 121px;
            top: 0px;
            z-index: 10;
        }

        .nav_li {
            margin-bottom: 55px;
            padding-left: 25px;
            cursor: pointer;
            line-height: 26px;
            transition: all 0.3s ease-in-out;
            position: relative;
            color: #888;
        }

        .nav_li>a {
            color: inherit;
        }

        .active {
            font-size: 20px;
            color: #007377;
        }

        .nav_li::before {
            content: '';
            width: 3px;
            height: 3px;
            position: absolute;
            border-radius: 50%;
            left: 0;
            background-color: #aaa;
            top: 50%;
        }

        .line {
            width: 3px;
            position: absolute;
            background-color: #007377;
            left: 120px;
            z-index: 15;
            height: 26px;
            transition: all .3s;
        }

        .list {
            width: 100%;
            height: 100%;
            background-color: #ebebeb;
            position: relative;
        }

        .item {
            width: 100%;
            height: 100%;
            position: absolute;
            transition: all .2s ease-in-out;
            opacity: 0;
        }

        .img {
            width: 100%;
            height: 100%;
            background-repeat: no-repeat;
            background-position: right 0;
            position: absolute;
        }

        .show {
            opacity: 1;
            visibility: visible;
        }

<div class="box">
        <div class="nav">
            <ul>
                <li class="nav_li active">
                    <a href="javascript:;">1</a>
                </li>
                <li class="nav_li ">
                    <a href="javascript:;">2</a>
                </li>
                <li class="nav_li ">
                    <a href="javascript:;">3</a>
                </li>
                <li class="nav_li ">
                    <a href="javascript:;">4</a>
                </li>
                <li class="nav_li">
                    <a href="javascript:;">5</a>
                </li>
                <li class="nav_li">
                    <a href="javascript:;">6</a>
                </li>
            </ul>
        </div>
        <div class="line" style="top: 45px;"></div>
        <ul class="list">
            <li class="item show">
                <div class="img"
                    style="background-image: url(https://3.swiper.com.cn/demo/timeline/images/01.jpg)">
                </div>
            </li>
            <li class="item">
                <div class="img "
                    style='background-image: url(https://3.swiper.com.cn/demo/timeline/images/02.jpg)'>
                </div>
            </li>
            <li class="item">
                <div class="img "
                    style="background-image: url(https://3.swiper.com.cn/demo/timeline/images/03.jpg)">
                </div>
            </li>
            <li class="item">
                <div class="img "
                    style="background-image: url(https://3.swiper.com.cn/demo/timeline/images/04.jpg)">
                </div>
            </li>
            <li class="item">
                <div class="img"
                    style="background-image: url(https://3.swiper.com.cn/demo/timeline/images/05.jpg)">
                </div>
            </li>
            <li class="item">
                <div class="img"
                    style="background-image: url(https://3.swiper.com.cn/demo/timeline/images/06.jpg)">
                </div>
            </li>
        </ul>
    </div>

        var liList = document.querySelectorAll('.nav_li')
        const contentList = document.querySelectorAll('.item')
        const line = document.querySelector('.line')
        
        liList.forEach(function (li, index) {
            // 获取li元素在页面上的位置
            const top = li.getBoundingClientRect().top
            li.addEventListener('mouseover', function () {
                liList.forEach(function (li) {
                    li.classList.remove('active')
                })
                li.classList.add('active')
                // 控制左边小条块的位置
                line.style.top = top - 60 + 'px';
                contentList.forEach(function (content) {
                    content.classList.remove('show')
                })
                contentList[index].classList.add('show')
            })
        })

Answer 1

结构不变, JS 代码:

  var liList = document.querySelectorAll('.nav_li')
  const contentList = document.querySelectorAll('.item')
  const line = document.querySelector('.line')



  let max = liList.length - 1
  let count = 0
  const timeID = setInterval(() => {
    if (count == max) {
      count = 0
    } else {
      count++
    }

    liList.forEach(function (li) {
      li.classList.remove('active')
    })
    const top = liList[count].getBoundingClientRect().top

    liList[count].classList.add('active')
    // 控制左边小条块的位置
    line.style.top = top - 60 + 'px';
    contentList.forEach(function (content) {
      content.classList.remove('show')
    })
    contentList[count].classList.add('show')
  }, 1000)


  liList.forEach(function (li, index) {
    // 获取li元素在页面上的位置
    const top = li.getBoundingClientRect().top
    li.addEventListener('mouseover', function () {
      clearInterval(timeID)
      liList.forEach(function (li) {
        li.classList.remove('active')
      })
      li.classList.add('active')
      // 控制左边小条块的位置
      line.style.top = top - 60 + 'px';
      contentList.forEach(function (content) {
        content.classList.remove('show')
      })
      contentList[index].classList.add('show')
    })
  })