移动端触摸滑动轮播图

最新推荐文章于 2022-10-28 01:04:24 发布
叶子_o
最新推荐文章于 2022-10-28 01:04:24 发布
阅读量891
点赞数
分类专栏：其他
本文链接：https://blog.csdn.net/xiamoziqian/article/details/102961212
版权
其他专栏收录该内容
42 篇文章 2 订阅
订阅专栏
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
         * {
             padding: 0;
             margin: 0;
         }

         body {
             overflow: hidden;
         }

         .carousel {
             width: 100%;
             height: 300px;
             overflow: hidden;
             border-bottom: 11px solid #ccc;
         }

         .carousel ul {
             list-style: none;
         }

         .carousel ul li {
             position: absolute;
             top: 0;
             left: 0;
             width: 100%;
         }

         .carousel ul li img {
             width: 100%;
         }
    </style>
</head>
<body>
    <div class="carousel" id="carousel">
        <div>
            <ul>
                <li><a href="#"><img src="img/0.png" alt=""></a></li>
                <li><a href="#"><img src="img/1.png" alt=""></a></li>
                <li><a href="#"><img src="img/2.png" alt=""></a></li>
                <li><a href="#"><img src="img/3.png" alt=""></a></li>
                <li><a href="#"><img src="img/4.png" alt=""></a></li>
            </ul>
        </div>
    </div>
    <script>
          // 找到相关元素
          var carousel = document.querySelector("#carousel");
          var imgLis = document.querySelectorAll("#carousel li");
         
          // 定义三个变量 分别表示当前图片 上一张图片 下一张图片
          var now = 0;
          var prev = 4;
          var next = 1;
          
          var windowWidth;
          // 初始化
          init();
          function init() {
               // 获取屏幕宽度
               windowWidth = document.documentElement.clientWidth;
               // 设置大盒子的高度和图片高度保持一致（图片宽高比200:130）
               carousel.style.height = windowWidth*130/200+"px";
               // 设置li的默认值
               for(var i=0; i<imgLis.length; i++) {
                   imgLis[i].style.webkitTransform = "translateX("+windowWidth+"px)";
               }

                // 去掉过渡
                imgLis[now].style.transition = "none";
                imgLis[prev].style.transition = "none";
                imgLis[next].style.transition = "none";

               // 新的位置设置
               imgLis[now].style.webkitTransform = "translateX(0px)";
               imgLis[prev].style.webkitTransform = "translateX("+(-windowWidth)+"px)";
               imgLis[next].style.webkitTransform = "translateX("+windowWidth+"px)";
          }

         

          // 定时器 
           var timer = setInterval(function() {
              showNext();
          },3000); 


          function showNext() {
              prev = now;
              now = next;
              next++;
              if(next>4) {
                  next = 0;
              }
                
              imgLis[next].style.transition = "none";  
              imgLis[next].style.webkitTransform = "translateX("+windowWidth+"px)";
              // 过渡
              imgLis[prev].style.transition = "all 0.3s ease 0s";   
              imgLis[now].style.transition = "all 0.3s ease 0s";

              imgLis[prev].style.webkitTransform = "translateX("+(-windowWidth)+"px)";   
              imgLis[now].style.webkitTransform = "translateX(0px)";

          }


          // 事件监听
          carousel.addEventListener("touchstart",touchstartHandler,false);
          carousel.addEventListener("touchmove",touchmoveHandler,false);
          carousel.addEventListener("touchend",touchendHandler,false); 
           
          var deltaX;// 手指的偏移量
          var startX;// 触摸开始时候手指位置 
          var startTime;
          function touchstartHandler(event) {
                event.preventDefault();
                if(event.touches.length>1) {
                    return;
                }
                clearInterval(timer);
                // 记录偏移量
                deltaX = event.touches[0].clientX;
                startX = event.touches[0].clientX;
                // 去掉过渡
                imgLis[now].style.transition = "none";
                imgLis[prev].style.transition = "none";
                imgLis[next].style.transition = "none";
                // 记录时间戳
                startTime = new Date();           
          } 

          function touchmoveHandler(event) { 
            event.preventDefault(); 
            if(event.touches.length>1) {
                    return;
                }
                clearInterval(timer); 
                // 得到实时坐标
                var clientX = event.touches[0].clientX;
                // 改变图片的位置
                imgLis[now].style.webkitTransform = "translateX("+(clientX-deltaX)+"px)";
                imgLis[next].style.webkitTransform = "translateX("+(windowWidth+clientX-deltaX)+"px)";
                imgLis[prev].style.webkitTransform = "translateX("+(-windowWidth+clientX-deltaX)+"px)";
                
            }
          
          // 300ms
          function touchendHandler(event) {
              // 阻止默认事件
              event.preventDefault();
              // 判断滑动是否成功
              var distance = event.changedTouches[0].clientX - startX;
              var time = new Date() - startTime;
              // 什么时候认为滑动成功？ 1  你向右边滑动距离超过屏幕一半  2  滑动整个过程小于300ms
              if(distance>=windowWidth/2 || (distance>30&&time<300)) {
                  //console.log("向右滑动成功");
                  next = now;
                  now = prev;
                  prev--;
                  if(prev<0) {
                      prev = 4;
                  }
                  // 加过渡
                  imgLis[now].style.transition = "all 0.3s ease 0s";   
                  imgLis[next].style.transition = "all 0.3s ease 0s";
                  // 平移
                  imgLis[now].style.webkitTransform = "translateX(0px)";
                  imgLis[next].style.webkitTransform = "translateX("+windowWidth+"px)";
              } else if(distance<-windowWidth/2 || (distance<-30&&time<300)) {
                  showNext();
              } else {
                  // 滑动不成功
                  console.log("滑动不成功");
                  // 过渡
                imgLis[now].style.transition = "all 0.3s ease 0s";
                imgLis[prev].style.transition = "all 0.3s ease 0s";
                imgLis[next].style.transition = "all 0.3s ease 0s";

                // 移动
                imgLis[now].style.webkitTransform = "translateX(0px)";
                imgLis[next].style.webkitTransform = "translateX("+windowWidth+"px)";
                imgLis[prev].style.webkitTransform = "translateX("+(-windowWidth)+"px)";
              }

              clearInterval(timer);
                // 开启I定时器
                timer = setInterval(function() {
                    console.log(11);
                    showNext();
                },3000); 
          }
    </script>    
</body>
</html>
效果预览：效果预览
叶子_o
关注
0
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
移动端触摸滑动轮播图

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
复制链接

扫一扫
专栏目录