移动端京东添加触摸事件轮播图

迷南。 2023-06-25 08:27 3阅读 0赞

/*轮播图*/
    function  bannerEffect(){ 
        /*1.设置修改轮播图的页面结构
        * a.在开始位置添加原始的最后一张图片
        * b.在结束位置添加原始的第一张图片*/
        /*1.1.获取轮播图结构*/
        var banner=document.querySelector(".jd_banner");
        /*1.2.获取图片容器*/
        var imgBox=banner.querySelector("ul:first-of-type");
        /*1.3.获取原始的第一张图片*/
        var first=imgBox.querySelector("li:first-of-type");
        /*1.4.获取原始的最后一张图片*/
        var last=imgBox.querySelector("li:last-of-type");
        /*1.5.在首尾插入两张图片   cloneNode:复制一个dom元素*/
        imgBox.appendChild(first.cloneNode(true));
        /*insertBefore(需要插入的dom元素，位置)*/
        imgBox.insertBefore(last.cloneNode(true),imgBox.firstChild);
    
        /*2.设置对应的样式*/
        /*2.1获取所有li元素*/
        var lis=imgBox.querySelectorAll("li");
        /*2.2 获取li元素的数量*/
        var count=lis.length;
        /*2.3.获取banner的宽度*/
        var bannerWidth=banner.offsetWidth;
        /*2.4 设置图片盒子的宽度*/
        imgBox.style.width=count*bannerWidth+"px";
        /*2.5 设置每一个li(图片)元素的宽度*/
        for(var i=0;i<lis.length;i++){ 
            lis[i].style.width=bannerWidth+"px";
        }
    
        /*定义图片索引:图片已经有一个宽度的默认偏移*/
        var index=1;
    
        /*3.设置默认的偏移*/
        imgBox.style.left=-bannerWidth+"px";
    
        /*4.当屏幕变化的时候，重新计算宽度*/
        window.onresize=function(){ 
            /*4.1.获取banner的宽度,覆盖全局的宽度值*/
            bannerWidth=banner.offsetWidth;
            /*4.2 设置图片盒子的宽度*/
            imgBox.style.width=count*bannerWidth+"px";
            /*4.3设置每一个li(图片)元素的宽度*/
            for(var i=0;i<lis.length;i++){ 
                lis[i].style.width=bannerWidth+"px";
            }
            /*4.4重新设置定位值*/
            imgBox.style.left=-index*bannerWidth+"px";
        }
    	
        var timerId;
        /*5.实现自动轮播*/
        var startTime=function(){ 
            timerId=setInterval(function(){ 
                /*5.1 变换索引*/
                index++;
                /*5.2.添加过渡效果*/
                imgBox.style.transition="left 0.5s ease-in-out";
                /*5.3 设置偏移*/
                imgBox.style.left=(-index*bannerWidth)+"px";
                /*5.4 判断是否到最后一张，如果是则*/
                setTimeout(function(){ 
                    if(index==count-1){ 
                        console.log(index);
                        index=1;
                        /*如果一个元素的某个属性之前添加过过渡效果，那么过渡属性会一直存在，如果不想要，则需要清除过渡效果*/
                        /*关闭过渡效果*/
                        imgBox.style.transition="none";
                        /*偏移到指定的位置*/
                        imgBox.style.left=(-index*bannerWidth)+"px";
                    }
                },500);
            },2000);
        }
        startTime();
    
        /*6.实现手动轮播*/
        var startX,moveX,distanceX;
        /*为图片添加触摸事件--触摸开始*/
        imgBox.addEventListener("touchstart",function(e){ 
            /*清除定时器*/
            clearInterval(timerId);
            /*获取当前手指的起始位置*/
            startX= e.targetTouches[0].clientX;
        });
    	
        /*为图片添加触摸事件--滑动过程*/
        imgBox.addEventListener("touchmove",function(e){ 
            /*记录手指在滑动过程中的位置*/
            moveX= e.targetTouches[0].clientX;
            /*计算坐标的差异*/
            distanceX=moveX-startX;
            /*为了保证效果正常，将之前可能添加的过渡样式清除*/
            imgBox.style.transition="none";
            /*实现元素的偏移  left参照最原始的坐标
            * 重大细节：本次的滑动操作应该基于之前轮播图已经偏移的距离*/
            imgBox.style.left=(-index*bannerWidth + distanceX)+"px";
        });
        /*添加触摸结束事件*/
    	
    	
    	
        /*touchend:松开手指触发*/
        imgBox.addEventListener("touchend",function(e){ 
            /*获取当前滑动的距离，判断距离是否超出指定的范围 100px*/
            if(Math.abs(distanceX) > 100){ 
                /*判断滑动的方向*/
                if(distanceX > 0){ //上一张
                    index--;
                }
                else{  //下一张
                    index++;
                }
                /*翻页*/
                imgBox.style.transition="left 0.5s ease-in-out";
                imgBox.style.left=-index*bannerWidth+"px";
            }
            else if(Math.abs(distanceX) > 0){  //得保证用户确实进行过滑动操作
                /*回弹*/
                imgBox.style.transition="left 0.5s ease-in-out";
                imgBox.style.left=-index*bannerWidth+"px";
            }
            //重新开启定时器
            startTime();
        });
    	
    	
    
        /*webkitTransitionEnd:可以监听当前元素的过渡效果执行完毕，当一个元素的过渡效果执行完毕的时候，会触发这个事件*/
        imgBox.addEventListener("webkitTransitionEnd",function(){ 
            /*如果到了最后一张(count-1)，回到索引1*/
            /*如果到了第一张(0)，回到索引count-2*/
            if(index==count-1){ 
                index=1;
                /*清除过渡*/
                imgBox.style.transition="none";
                /*设置偏移*/
                imgBox.style.left=-index*bannerWidth+"px";
            }
            else if(index==0){ 
                index=count-2;
                /*清除过渡*/
                imgBox.style.transition="none";
                /*设置偏移*/
                imgBox.style.left=-index*bannerWidth+"px";
            }
        });
    }