javascript - 如何改成自动切换？

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')    })  })