JS实现一个上下轮播

作者: 甘道夫老矣 | 来源:发表于2022-04-04 15:33 被阅读0次

JS实现一个上下轮播
原生js制作轮播图
16 JavaScript实现网站轮播特效
web常用库
项目-轮播图
Vue封装Swiper实现图片轮播
用Vue封装Swiper实现图片轮播很简单
Javascript专题（三）b.各种轮播和细节分析--上下滚动
一点资讯问题
小记setTimeout

直接上代码

<!doctype html>
<html>

<head>
   <meta charset="utf-8">
   <title></title>
   <meta name="description" content="">
   <meta name="keywords" content="">
   <style>
       * {
           margin: 0;
           padding: 0
       }

       #slide {
           position: absolute;
           height: 300px;
           width: 260px;
           overflow: hidden;
           border: 1px solid red;
       }

       #slide p {
           height: 34px;
           line-height: 34px;
           overflow: hidden;
           border:1px solid blue;
       }

       #slide span {
           float: right
       }
   </style>
</head>

<body>

   <div id="slide">
       <div id="slide1">
           <p>11111111111111111*</p>
           <p>222222222222222222</p>
           <p>33333333333333333333</p>
           <p>3333333333333333333333</p>
           <p>444444444444444444</p>
           <p>55555555555555555555555555</p>
           <p>666666666666666666666666666666</p>
           <p>777777777777777777777777*</p>
           <p>88888888888888888</p>
       </div>
       <div id=slide2></div>
   </div>

   <script>
       let speed = 80
       let slide = document.getElementById("slide");
       let slide2 = document.getElementById("slide2");
       let slide1 = document.getElementById("slide1");
       slide2.innerHTML = slide1.innerHTML
       function rowUp() {
           // console.log(slide.scrollTop);
           // console.log( slide1.offsetHeight);
           // console.log(slide2.offsetTop );
           // console.log('------')
           // 这里的算法就是通过第二个的高度与父顶上去了多少进行比较
           if (slide2.offsetTop - slide.scrollTop <= 0)
               slide.scrollTop -= slide1.offsetHeight
           else {
               slide.scrollTop++
           }
       }
      
       let timer = setInterval(rowUp, speed)
       slide.onmouseover = function () { clearInterval(timer) }
       slide.onmouseout = function () { timer = setInterval(rowUp, speed) }
   </script>

</body>

</html>