全屏循环滚动轮播

最新推荐文章于 2024-05-26 23:07:16 发布

asnissj

最新推荐文章于 2024-05-26 23:07:16 发布

阅读量823

点赞数 1

本文链接：https://blog.csdn.net/l574179870/article/details/80923837

版权

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
           overflow: hidden;
        }
        ul{
            width: 100%;
            list-style: none;
            position: absolute;
            top: 0;
        }
        li{
            width: 100%;
            background-color: #00aaad;
        }
    </style>
</head>
<body>
<ul id="div">
<li>1</li>
<li style="background-color: #3bff77" >2</li>
<li style="background-color: #C173B1">3</li>
</ul>
<script>
    var ul=document.getElementById("div");
  var li=ul.getElementsByTagName("li");
    var bul=true;
//   bul就是一个开关，当一次滚动正在进行时，下一次的滚动就不会执行
  for(i=0;i<li.length;i++){
      li[i].style.height=window.innerHeight+"px"
  }
  window.onresize=function () {
      for(i=0;i<li.length;i++){
          li[i].style.height=window.innerHeight+"px"
      }
  }
  //window.onmousewheel是除火狐外的浏览器执行
  window.onmousewheel=function (ev) {
      var ev=window.event||ev;
      if(bul){

      if(ev.wheelDelta<0){
bul=false;
          ul.style.top=0+"px"
         var sj1= setInterval(function () {
             ul.style.top=parseInt(ul.style.top)-1+"px";
             if(parseInt(ul.style.top)<=-window.innerHeight){
                 ul.style.top=0+"px";
                 ul.appendChild(li[0]);
                 bul=true;
                clearInterval(sj1)
            }
          },5)
      }
      if(ev.wheelDelta>0){
          bul=false;
          ul.insertBefore(li[2],li[0]);
          ul.style.top=-window.innerHeight+"px";
          var sj2= setInterval(function () {
              ul.style.top=parseInt(ul.style.top)+1+"px";
              if(parseInt(ul.style.top)>=0){
                  ul.style.top=0+"px";
                  bul=true;
                  clearInterval(sj2)
              }
          },5)
      }

      }
  }
  //window.addEventListener("DOMMouseScroll",fn,false)是只有火狐执行
window.addEventListener("DOMMouseScroll",fn,false);
     function fn(ev) {
      var ev=window.event||ev;
      if(bul){
          if(ev.detail>0){
              bul=false;
              ul.style.top=0+"px"
              var sj1= setInterval(function () {
                  ul.style.top=parseInt(ul.style.top)-1+"px";
                  if(parseInt(ul.style.top)<=-window.innerHeight){
                      ul.style.top=0+"px";
                      ul.appendChild(li[0]);
                      bul=true;
                      clearInterval(sj1)
                  }
              },5)
          }
          if(ev.detail<0){
              bul=false;
              ul.insertBefore(li[2],li[0]);
              ul.style.top=-window.innerHeight+"px";
              var sj2= setInterval(function () {
                  ul.style.top=parseInt(ul.style.top)+1+"px";
                  if(parseInt(ul.style.top)>=0){
                      ul.style.top=0+"px";
                      bul=true;
                      clearInterval(sj2)
                  }
              },5)
          }
      }
  }
</script>
</body>
</html>