JSdemo：上下滚动的轮播图封装

本文主要是介绍JSdemo：上下滚动的轮播图封装，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

记录一下，方便后续用。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Demo</title><style>* {padding: 0;margin: 0;}#box {position: relative;width: 100px;height: 30px;overflow: hidden;}#box ul {position: absolute;top: 0;left: 0;width: 100%;height: 400%;}#box ul li {width: 100%;height: 25%;font-size: 20px;}</style>
</head>
<body><div id="box"><ul><li>111</li><li>222</li><li>333</li></ul></div><script>const box = document.getElementById('box')const ulTips = document.getElementsByTagName('ul')[0]let numTips = 0let objTips = {4: ['444', '999'],5: ['555', '1020'],29: ['2901', '2902'],30: ['3001', '3002']}ulTips.children[0].innerHTML = objTips[4][0]ulTips.children[1].innerHTML = objTips[4][1]ulTips.children[2].innerHTML = objTips[5][0]const liTipsCopy = ulTips.children[0].cloneNode(true)ulTips.appendChild(liTipsCopy)console.log('ulTips: ', ulTips.offsetTop, ulTips.children[0].offsetHeight)function animate(obj, target, callback) {clearInterval(obj.timer)function move() {var step = (target - obj.offsetTop) / 10;step = step > 0 ? Math.ceil(step) : Math.floor(step)if(obj.offsetTop == target) {clearInterval(obj.timer);callback&&callback();}obj.style.top = obj.offsetTop + step + 'px'}obj.timer = setInterval(move, 40)}setInterval(() => {if(numTips === ulTips.children.length - 1) {ulTips.style.top = 0numTips = 0} else {numTips++}animate(ulTips, -numTips * ulTips.children[0].offsetHeight)}, 1500)</script>
</body>
</html>