请选择 进入手机版 | 继续访问电脑版
猿人社区
查看: 40|回复: 0

[干货] touch 无限轮播图

[复制链接]

91

主题

91

帖子

474

积分

管理员

Rank: 9Rank: 9Rank: 9

注册时间
2018-7-24
最后登录
2019-2-15
在线时间
73 小时
威望
18
金钱
335
贡献
12
发表于 2019-1-26 23:55:57 | 显示全部楼层 |阅读模式
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <script src="js/jquery.js"></script>
  9. </head>
  10. <body>
  11.     <style>
  12.         body { padding:0; margin:0; }
  13.         .swiper { width:100%; overflow:hidden; }
  14.         .swiper .image_list { position:relative; height:200px; overflow:hidden; white-space:nowrap; }   
  15.         .swiper a { float:left; padding:0; margin:0; display:inline-block; width:300px; overflow:hidden; }   
  16.         .swiper a img { width:100%; }   
  17.     </style>

  18.     <div class="swiper">
  19.         <div class="image_list">
  20.             <a>
  21.                 <img src="images/5.jpg" alt="">
  22.             </a>
  23.             <a href="#1">
  24.                 <img src="images/1.jpg" alt="">
  25.             </a>
  26.             <a href="#2">
  27.                 <img src="images/2.jpg" alt="">
  28.             </a>
  29.             <a href="#3">
  30.                 <img src="images/3.jpg" alt="">
  31.             </a>
  32.             <a href="#4">
  33.                 <img src="images/4.jpg" alt="">
  34.             </a>
  35.             <a href="#5">
  36.                 <img src="images/5.jpg" alt="">
  37.             </a>
  38.             <a href="#1">
  39.                 <img src="images/1.jpg" alt="">
  40.             </a>
  41.             
  42.         </div>
  43.     </div>

  44.     <script>
  45.         var allImages=$(".swiper a");
  46.         for(let i=0;i<allImages.length;i++){
  47.             allImages[i].style.width=window.innerWidth+"px";
  48.         }
  49.         var singelWidth=parseInt($(allImages[0]).css("width"));
  50.         $(".image_list").css("width",singelWidth*allImages.length+"px");

  51.         var startX=0;
  52.         var startTime=0;
  53.         var moveX=0;
  54.         var endTime=0;
  55.         var domLeft=0;
  56.         var imageIndex=1;
  57.         var maxMove=Math.round(window.innerWidth/5);
  58.         $(".image_list").css("left",`-${singelWidth*imageIndex}px`);
  59.         $(".image_list").on("touchstart",(e)=>{
  60.             $(".image_list").css("transition","");
  61.             let touch=e.touches[0];
  62.             let listDom=$(".image_list")[0];
  63.             domLeft=parseInt($(".image_list").css("left"));
  64.             domLeft=touch.pageX+Math.abs(domLeft);
  65.             startX=touch.pageX;
  66.             startTime=Date.now();
  67.             
  68.         })
  69.         $(".image_list").on("touchmove",(e)=>{
  70.             e.preventDefault();
  71.             let touch=e.touches[0];
  72.             moveX=touch.pageX;
  73.             
  74.             $(".image_list").css("left",`${moveX-domLeft}px`);
  75.         })
  76.         $(".image_list").on("touchend",(e)=>{
  77.             if(Math.abs(moveX)>5){
  78.                 endTime=Date.now();
  79.                 $(".image_list").css("transition",`all 0.2s linear`);
  80.                
  81.                 if(Math.abs(startX-moveX)>maxMove||endTime-startTime>50){
  82.                     if(moveX>startX){
  83.                         imageIndex--;
  84.                         if(imageIndex<0){
  85.                             imageIndex=0;
  86.                         }
  87.                         $(".image_list").css("left",`-${singelWidth*imageIndex}px`);
  88.                         if(imageIndex==0){
  89.                             imageIndex=allImages.length-2;
  90.                             $(".image_list").on("transitionend",()=>{
  91.                                 $(".image_list").css("transition","");
  92.                                 $(".image_list").css("left",`-${singelWidth*imageIndex}px`);
  93.                             })
  94.                         }
  95.                     }else{
  96.                         imageIndex++;
  97.                         if(imageIndex>allImages.length-1){
  98.                             imageIndex=allImages.length-1;
  99.                         }
  100.                         $(".image_list").css("left",`-${singelWidth*imageIndex}px`);
  101.                         if(imageIndex==allImages.length-1){
  102.                             imageIndex=1;
  103.                             $(".image_list").on("transitionend",()=>{
  104.                                 $(".image_list").css("transition","");
  105.                                 $(".image_list").css("left",`-${singelWidth*imageIndex}px`);
  106.                             })
  107.                         }
  108.                     }
  109.                 }else{
  110.                     $(".image_list").css("left",`-${singelWidth*imageIndex}px`);
  111.                 }
  112.             }
  113.             moveX=0;
  114.             startX=0;
  115.             startTime=0;
  116.             endTime=0;
  117.         })
  118.     </script>
  119. </body>
  120. </html>
复制代码


您需要登录后才可以回帖 登录 | 入住社区

本版积分规则

Archiver|手机版|小黑屋|Deaf community ( 粤ICP备17070410号 )

GMT+8, 2019-2-17 07:15 , Processed in 0.051374 second(s), 18 queries .

Powered by Discuz! X3.4© 2001-2017 Comsenz Inc. Template design by Penday

快速回复 返回顶部 返回列表