banner实现

最新推荐文章于 2022-01-17 16:00:55 发布

weixin_39616739

最新推荐文章于 2022-01-17 16:00:55 发布

阅读量248

点赞数

分类专栏： H5

本文链接：https://blog.csdn.net/weixin_39616739/article/details/97811983

版权

H5 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

实现淘宝首页banner

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <meta name="viewport" content="width=device-width">
    <style media="screen">
    * {margin:0; padding:0; list-style:none;}
    html {font-size:10px}

    header {width:48rem;height:5.5rem;background:#fe5400; overflow:hidden; position:relative; z-index:99;}

    header h1 {width:4.4rem; height:3.7rem; background:url(img/logo.png) no-repeat; text-indent:-9999rem; background-size:100% 100%; margin-left:0.6rem; margin-top:1rem;}

    /*banner*/
    .banner {width:48rem; height:15rem; position:relative; overflow:hidden;}
    .banner ul {width:999rem; height:15rem; overflow:hidden; transform:translateX(-48rem);}
    .banner ul li {width:48rem; height:15rem; float:left;}
    .banner ul li img {width:100%; height:100%;}
    .banner ol {position: absolute; right:0; bottom: 1.3rem;}
    .banner ol li {width:1rem; height:1rem; border:1px solid #333; background:white; border-radius:50%; margin:0 0.4rem; opacity:0.6; float:left;}
    .banner ol li.active {background:#ff5501; border:1px solid #d0a793; opacity:1}

    /**/
    .page_content {background:white; position:relative; top:-5rem;}

    .load {height:5rem; line-height:5rem; text-align:center; font-size:2rem;}
    </style>
    <script>
    window.onresize=function (){
      document.documentElement.style.fontSize=document.documentElement.clientWidth/48+'px';
    };

    window.onresize();

    window.onload=function (){
      let oBanner=document.querySelector('.banner');
      let oBannerUl=oBanner.children[0];
      let oBannerUlLi=oBannerUl.children;
      let oPageContent=document.querySelector('.page_content');
      let oLoad=document.querySelector('.load');
      let aOlLi=document.querySelectorAll('.banner ol li');

      //
      oBannerUl.appendChild(oBannerUlLi[0].cloneNode(true));
      oBannerUl.insertBefore(oBannerUlLi[oBannerUlLi.length-2].cloneNode(true), oBannerUlLi[0]);

      let x=-oBannerUlLi[0].offsetWidth,y=0;

      oBanner.addEventListener('touchstart', function (ev){
        oPageContent.style.transition='none';
        oBannerUl.style.transition='none';//移除transition动画 提高性能

        let startX=ev.targetTouches[0].clientX;
        let startY=ev.targetTouches[0].clientY;

        let disX=startX-x;
        let disY=startY-y;

        let dir='';

        function fnMove(ev){//无法remove无名函数的event
          if(dir==''){
            if(Math.abs(ev.targetTouches[0].clientX-startX)>=5){
              dir='x';
            }else if(Math.abs(ev.targetTouches[0].clientY-startY)>=5){
              dir='y';
            }
          }else{
            if(dir=='x'){
              x=ev.targetTouches[0].clientX-disX;
            }else{
              y=ev.targetTouches[0].clientY-disY;
            }

            oBannerUl.style.transform=`translateX(${x}px)`;

            if(y>0){
              oPageContent.style.transform=`translateY(${y/3}px)`;//不跟随touch点

              if(y>200){
                oLoad.innerHTML='松手';
              }else{
                oLoad.innerHTML='下拉刷新';
              }
            }else{
              oPageContent.style.transform=`translateY(${y}px)`;
            }
          }
        }
        function fnEnd(){
          oBanner.removeEventListener('touchmove', fnMove, false);
          oBanner.removeEventListener('touchend', fnEnd, false);

          if(y>0){
            y=0;
            oPageContent.style.transition='0.3s all ease';
            oPageContent.style.transform=`translateY(0px)`;
          }

          //
          let n=Math.round(-x/oBannerUl.children[0].offsetWidth);
          x=-n*oBannerUl.children[0].offsetWidth;//判断谁是当前banner

          console.log(n);

          oBannerUl.style.transition='0.3s all ease';
          oBannerUl.style.transform=`translateX(${x}px)`;

          Array.from(aOlLi).forEach((li,index)=>{
            li.className=index==n?'active':'';
          })
        }

        oBanner.addEventListener('touchmove', fnMove, false);
        oBanner.addEventListener('touchend', fnEnd, false);
      }, false);
    };
    </script>
  </head>
  <body>
    <header>
      <h1>淘宝网</h1>
    </header>
    <div class="load">
      下拉刷新
    </div>
    <div class="page_content">
      <section class="banner">
        <ul>
          <li><img src="img/banner1.jpg" /></li>
          <li><img src="img/banner2.jpg" /></li>
          <li><img src="img/banner1.jpg" /></li>
          <li><img src="img/banner2.jpg" /></li>
          <li><img src="img/banner1.jpg" /></li>
          <li><img src="img/banner2.jpg" /></li>
        </ul>
        <ol>
          <li class="active"></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ol>
      </section>
      <nav>

      </nav>
    </div>
  </body>
</html>

weixin_39616739

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
banner实现

实现淘宝首页banner<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <meta name="viewport" content="width=device-width"> <...
复制链接

扫一扫