zoukankan      html  css  js  c++  java
  • 移动端--轮播图

    tap事件

    1、

    ① tapstart 当开始滑动的时候滑动

    ② tapmove  当在元素中滑动的时候触发

    ③ tapend  当滑动结束的时候触发

    事件对象中touches保存了当前手指触摸屏幕的信息,是个列表; e.touches[0].clientX

    原理:根据位移的正负判断是左滑还是右滑。

    注意:在touchend的事件对象中没有client 属性,所以需要在touchmove中记录。

    var startX =0 ;

    var moveX =0 ;

    var distance =0 ;//误触范围

    container.addEventListener('touchstart',function(){

          //开始滑动时记录位置

          startX = e.touches[0].clientX;

    })

    container.addEventListener('touchmove',function(){

          moveX = e.touches[0].clientX;

    })

    container.addEventListener('touchend',function(){

           var distanceX = moveX-startX ;

           distance = Math.abs(moveX-startX);

            if(distanceX > 0){

                  if(distance>30)

                 //向右滑动

             }else{

                 //向左滑动

             }

    })

    轮播图需求分析 

    1、获取元素

    2、计算并设置元素ul的宽度

    3、给元素添加滑动事件

    4、判断左滑还是右滑

    5、更新点的状态

    6、自动轮播效果

    代码:1、

           var banner =document.querySelector('.banner');

           var ul = banner.querySelector('ul');

           var bannerLi =ul.querySelectorAll('li');

            var spanList = banner.querySelectorAll('.points span');

           var iWidth = document.documentElement.clientWidth;//屏幕宽度

            2、

            //设置ul的宽度

           ul.style.width = iWidth * bannerLi.length+'px';

             //设置li的宽度

             for(var i=0;i<bannerLi.length;i++){

                     bannerLi[i].width = iWidth + 'px';

             }

             3、

             //手指开始触摸的位置

             var startX =0,moveX =0,disX=0;

             var index  =0 ;//当前索引值

             banner.addEventListener('touchstart',function(e){

                   clearInterval(timer);

                   start = e.touches[0].clientX;

            })

            banner.addEventListener('touchmove',function(e){

                  moveX = e.touches[0].clientX;

                  disX = Math.abs(moveX-startX);

             })

             banner.addEventListener('touchend',function(e){

                  //重新启动定时器

                    if(moveX-startX>0){

                          //向右滑动

                          if(disX>30){

                               index -- ;

                               if(index < 0){

                                      index = 0 ;

                               }

                               ul.style.transition="all 0.4s";

                               ul.style.transform = 'translateX('+ (-index*iWidth) +'px)';

                          }

                     }else{

                         if(disX>30){

                                index ++ ;

                                //如果当前的滚动索引大于的最后一张图片

                                if(index > ul.length -1){

                                     index = ul.length -1 ;

                                 }

                                ul.style.transition="all 0.4s";

                               //调节滚动距离

                                ul.style.transform = 'translateX('+ (-index*iWidth) +'px)';

                         }

                     }

                    //更新选中状态

                    if(distX > 30) {

                         //5、先清空所有的,在设置当前的

                         for(var i=0;i<pointList.length;i++){

                                pointList[i].classList.remove('active');

                         }

                         pointList[index].classList.add('active');

                    }

                  //6、定时轮播

                 var timer = setInterval(function(){

                        index++;

                        if(index>ul.length-1){

                              index = 0;

                         }

                          ul.style.transition="all 0.4s";

                           //调节滚动距离

                           ul.style.transform = 'translateX('+ (-index*iWidth) +'px)';

                        //5、先清空所有的,在设置当前的

                         for(var i=0;i<pointList.length;i++){

                                pointList[i].classList.remove('active');

                         }

                         pointList[index].classList.add('active');

                 },1000)

             })

  • 相关阅读:
    阿里DatatX mysql8往 Elasticsearch 7 插入时间数据 时区引发的问题
    通俗易懂 k8s (3):kubernetes 服务的注册与发现
    ReplicaSet 和 ReplicationController 的区别
    使用Go module导入本地包
    k8s之statefulset控制器
    终于成功部署 Kubernetes HPA 基于 QPS 进行自动伸缩
    Atitit drmmr outline org stat vb u33.docx Atitit drmmr outline org stat v0 taf.docx Atitit drmmr out
    Atitit all diary index va u33 #alldiary.docx Atitit alldiaryindex v1 t717 目录 1. Fix 1 2. Diary deta
    Atitit path query 路径查询语言 数据检索语言 目录 1.1. List map >> spel 1 1.2. Html数据 》》Css选择符 1 1.3. Json 》map》
    Atitit prgrmlan topic--express lan QL query lan表达式语言 目录 1. 通用表达语言(CEL) 1 1.1. 8.2 功能概述 1 1.2. Ongl
  • 原文地址:https://www.cnblogs.com/sunqq/p/8327425.html
Copyright © 2011-2022 走看看