纯JS实现图片的横向（竖向）滚动

html代码展示图片

<div>
  <ul id="ads">
    <li><img src="img/1.jpg" /></li>
    <li><img src="img/2.webp" /></li>
    <li><img src="img/3.jpg" /></li>
    <li><img src="img/4.webp" /></li>
    <li><img src="img/5.jpg" /></li>
  </ul>
</div>

css修改界面样式

* {
    margin: 0;
    padding: 0;
  }
  div {
    width: 400px;
    height: 320px;
  }
  #ads {
    border: 4px solid green;
    height: 320px;
    overflow: hidden;
    position: relative;
  }
  #ads li {
    list-style: none;
    height: 320px;
  }
  img {
    width: 400px;
    height: 320px;
    position: absolute;
  }

JS实现图片的滚动

var time
var div = document.getElementById('ads') //外面的父元素
var ul = div.firstElementChild //里面的子元素
var ul2 = ul.cloneNode(true)
div.appendChild(ul2)
// 如果水平方向,设置图片位置
// var imgs = document.getElementsByTagName('img')
// imgs[0].style.left = '0px'
// imgs[0].style.top = '0px'
// imgs[1].style.left = '400px'
// imgs[1].style.top = '0px'
// imgs[2].style.left = '800px'
// imgs[2].style.top = '0px'
// imgs[3].style.left = '1200px'
// imgs[3].style.top = '0px'
// imgs[4].style.left = '1600px'
// imgs[4].style.top = '0px'

function move() {
// 垂直方向scrollTop  如果水平方向 scrollLeft
    if (div.scrollTop < 1280) {
        div.scrollTop += 1
    } else {
        div.scrollTop = 0
    }
    // if (div.scrollLeft < 1680) {
    //    div.scrollLeft += 1
    // } else {
    //    div.scrollLeft = 0
    // }
}
function loop() {
    time = setInterval(move, 5)
}
loop()
var div1 = document.getElementsByTagName('div')[0]
//鼠标移进div区域
div1.onmouseover = function () {
    console.log('鼠标移进div区域')
    clearInterval(time)
}
//鼠标移出div区域
div1.onmouseout = function () {
    console.log('鼠标移出div区域')
    loop()
}