zoukankan      html  css  js  c++  java
  • 原生JS实现移动端轮播图

    功能描述:

    自动无缝轮播图片,底部小圆点跟图片保持一致;手指左右移动轮播图,移动距离大于50px播放下一张(或上一张),小于50px则回弹

    具体功能实现:

    1.定时器 自动轮播图片

    先声明一个index=0用来存图片索引;

    添加一个定时器,每隔两秒调用一次,每调用一次定时器(图片播放一次)index就加一;

    通过transform(变形)属性和transition(过渡)属性实现图片的轮播。

    1 var index = 0;
    2 var timer = setInterval(function() {
    3     index++;
    4     var translatex = -index * w;  // ul要移动的距离
    5     ul.style.transition = 'all .4s';
    6     ul.style.transform = 'translateX(' + translatex + 'px)';
    7 }, 2000);

    2.实现无缝轮播并让小圆点和图片一致

    给ul绑定监听函数(每次轮播移动的都是整个ul),过渡结束(transitionend)时执行;

    判断索引index是否大于等于3,是的话说明已经播放到最后一张,让index=0并去掉过渡效果,快速回到第一张;

    判断索引是否小于0,小于0说明用户一开始是往前滑的,让index=2并去掉过渡效果,快速到最后一张;

    让底部小圆点跟着一起动(给当前li添加类,把其他的li删除类)

     1 ul.addEventListener('transitionend', function() {
     2     if(index >= 3) {
     3         index = 0;
     4         ul.style.transition = '';  // 去掉过渡效果
     5         var translatex = -index * w;
     6         ul.style.transform = 'translateX(' + translatex + 'px)';
     7     } else if(index < 0) {
     8         index = 2;
     9         ul.style.transition = '';
    10         var translatex = -index * w;
    11         ul.style.transform = 'translateX(' + translatex + 'px)';
    12     }
    13     // 让底部小圆点跟着一起动
    14     // 将带有current类的li去掉该类
    15     ol.querySelector('.current').classList.remove('current');
    16     // 给当前li添加current类
    17     ol.children[index].classList.add('current');
    18 })

    3.实现图片跟随手指移动先声明几个变量用来存储手指初始位置、手指是否在屏幕上移动以及手指移动的距离

    var startX = 0;    // 手指初始位置
    var moveX = 0;     // 手指在屏幕上移动的距离
    var flag = false;    // 记录用户是否移动了手指

    给ul绑定手指触摸事件,记录手指触摸的初始位置,并清除定时器(不让它自动轮播了)

    1 ul.addEventListener('touchstart', function(e) {
    2     startX = e.targetTouches[0].pageX;  // 手指的初始触摸位置(左右轮播,只记录x就可以了)
    3     clearInterval(timer);
    4 })

    给ul绑定手指移动事件

    1 ul.addEventListener('touchmove', function(e) {
    2     moveX = e.targetTouches[0].pageX - startX;   // 手指移动的距离
    3     var translatex = -index * w + moveX;
    4     ul.style.transition = 'none';
    5     ul.style.transform = 'translateX(' + translatex + 'px)';
    6     flag = true;    // 手指移动了,将flag改为true
    7     e.preventDefault();   // 阻止屏幕滚动的默认行为(防止用户移动轮播图的时候屏幕也跟着上下滚动)
    8 })

    4.实现手指离开后图片的轨迹看用户是否移动了图片,flag为true才去判断:

    ①手指移动距离大于50px图片播放上一张或下一张②手指移动距离小于50px图片回弹;

    结束后把flag改为false,并重新开启定时器让它继续自动轮播

     1 ul.addEventListener('touchend', function(e) {
     2     if(flag) {     // flag==true(移动图片)时才去判断用户的移动方向和距离
     3         if(Math.abs(moveX) > 50) {  // 移动距离大于50时 滑向上一张或下一张(moveX可能为正也可能为负,Math.abs()取绝对值)
     4             if(moveX > 0) {  // 大于0右滑 图片索引减一
     5                 index--;
     6             } else {    // 小于0左滑 图片索引加一
     7                 index++;
     8             }
     9             var translatex = -index * w;
    10             ul.style.transition = 'all .3s';
    11             ul.style.transform = 'translateX(' + translatex + 'px)';
    12         } else {    // 小于50px就回弹
    13             var translatex = -index * w;
    14             ul.style.transition = 'all .1s';
    15             ul.style.transform = 'translateX(' + translatex + 'px)';
    16         }
    17     }
    18     // 结束后 把flag重新改为false,并开启定时器让图片开始轮播
    19     flag = false;
    20     // 先清除再开启,保证只有一个定时器在运行(不然会有bug)
    21     clearInterval(timer);
    22     timer = setInterval(function() {
    23         index++;
    24         var translatex = -index * w;
    25         ul.style.transition = 'all .4s';
    26         ul.style.transform = 'translateX(' + translatex + 'px)';
    27     }, 2000);
    28 })

    注:功能还可以继续优化,比如动态添加图片,动态添加底部小圆点等。具体实现方法可以参照我上一篇 JavaScript实现动态轮播图效果 

    具体实现代码如下:

    HTML代码:

     1 <div class="focus">
     2     <ul>
     3         <!-- 用户可能一开始往上一张滑,所以要多添加一个focus3 -->
     4         <li><img src="images/focus3.jpg" alt=""></li>
     5         <li><img src="images/focus1.jpg" alt=""></li>
     6         <li><img src="images/focus2.jpg" alt=""></li>
     7         <li><img src="images/focus3.jpg" alt=""></li>
     8         <li><img src="images/focus1.jpg" alt=""></li>
     9     </ul>
    10     <ol>
    11         <li class="current"></li>
    12         <li></li>
    13         <li></li>
    14     </ol>
    15 </div>

    CSS代码:

     1 * {
     2     margin: 0;
     3     padding: 0;
     4 }
     5 body {
     6     margin: 0 auto;
     7     max-width: 540px;
     8     min-width: 320px;
     9     background: #f6f6f6;
    10 }
    11 .focus {
    12     width: 100%;
    13     position: relative;
    14     margin-top: 50px;
    15     overflow: hidden;
    16 }
    17 .focus ul {
    18     width: 500%;
    19     overflow: hidden;
    20     margin-left: -100%;
    21 }
    22 .focus ul li {
    23     float: left;
    24     width: 20%;
    25 }
    26 .focus ul img {
    27     width: 100%;
    28 }
    29 .focus ol {
    30     position: absolute;
    31     bottom: 5px;
    32     right: 5px;
    33 
    34 }
    35 .focus ol li {
    36     width: 5px;
    37     height: 5px;
    38     display: inline-block;
    39     background-color: #fff;
    40     border-radius: 4px;
    41     transition: all .2s;
    42 }
    43 .focus .current {
    44     width: 15px;
    45 }

    JavaScript代码:

     1 window.addEventListener('load', function() {
     2     var focus = document.querySelector('.focus');
     3     var ul = focus.children[0];   // 获取focus的第一个孩子,也就是ul
     4     var ol = focus.children[1];
     5     var w = focus.offsetWidth;    // 获取focus的宽度
     6     var index = 0;    // 用来记录图片索引
     7     var timer = setInterval(function() {    // 添加定时器,两秒调用一次
     8         index++;   // 每调用一次(轮播一次),图片索引号+1
     9         var translatex = -index * w;    // ul要移动的距离
    10         ul.style.transition = 'all .4s';   // 添加过渡属性(css3里的属性)
    11         ul.style.transform = 'translateX(' + translatex + 'px)';
    12     }, 2000);
    13     // 给ul绑定监听函数(每次轮播移动的都是整个ul)  过渡结束(transitionend)时执行
    14     ul.addEventListener('transitionend', function() {
    15         if(index >= 3) {    // 索引 > 3说明已经轮播到最后一张了
    16             index = 0;
    17             // 去掉过渡效果 快速回到第一张
    18             ul.style.transition = '';
    19             var translatex = -index * w;
    20             ul.style.transform = 'translateX(' + translatex + 'px)';
    21         } else if(index < 0) {    // 索引 < 0说明用户一开始是往前滑的
    22             index = 2;
    23             ul.style.transition = '';
    24             var translatex = -index * w;
    25             ul.style.transform = 'translateX(' + translatex + 'px)';
    26         }
    27         // 让底部小圆点跟着一起动
    28         // 将带有current类的li去掉该类
    29         ol.querySelector('.current').classList.remove('current');
    30         // 给当前li添加current类
    31         ol.children[index].classList.add('current');
    32     })
    33     // 手指滑动轮播图
    34     var startX = 0;    // 用来存储手指初始位置
    35     var moveX = 0;     // 用来存储手指在屏幕上移动的距离
    36     var flag = false;    // 记录用户是否在图上移动了手指
    37     // 给ul绑定手指触摸事件
    38     ul.addEventListener('touchstart', function(e) {
    39         startX = e.targetTouches[0].pageX;  // 手指的初始触摸位置(左右轮播,只记录x就可以了)
    40         clearInterval(timer);    // 当手指触摸屏幕时清除定时器(不让它自动轮播了)
    41     })
    42     // 给ul绑定手指移动事件
    43     ul.addEventListener('touchmove', function(e) {
    44         moveX = e.targetTouches[0].pageX - startX;   // 手指移动的距离
    45         var translatex = -index * w + moveX;
    46         ul.style.transition = 'none';
    47         ul.style.transform = 'translateX(' + translatex + 'px)';
    48         flag = true;    // 手指移动了,将flag改为true
    49         e.preventDefault();   // 阻止屏幕滚动的默认行为
    50     })
    51     // 给ul绑定手指离开事件
    52     ul.addEventListener('touchend', function(e) {
    53         if(flag) {     // flag==true(移动图片)时才去判断用户的移动方向和距离
    54             if(Math.abs(moveX) > 50) {  // 移动距离大于50时 滑向上一张或下一张(moveX可能为正也可能为负,Math.abs()取绝对值)
    55                 if(moveX > 0) {  // 大于0右滑 图片索引减一
    56                     index--;
    57                 } else {    // 小于0左滑 图片索引加一
    58                     index++;
    59                 }
    60                 var translatex = -index * w;
    61                 ul.style.transition = 'all .3s';
    62                 ul.style.transform = 'translateX(' + translatex + 'px)';
    63             } else {    // 小于50px就回弹
    64                 var translatex = -index * w;
    65                 ul.style.transition = 'all .1s';
    66                 ul.style.transform = 'translateX(' + translatex + 'px)';
    67             }
    68         }
    69         // 结束后 把flag重新改为false,并开启定时器让图片开始轮播
    70         flag = false;
    71         // 先清除再开启,保证只有一个定时器在运行(不然会有bug)
    72         clearInterval(timer);
    73         timer = setInterval(function() {
    74             index++;
    75             var translatex = -index * w;
    76             ul.style.transition = 'all .4s';
    77             ul.style.transform = 'translateX(' + translatex + 'px)';
    78         }, 2000);
    79     })
    80 }) 
  • 相关阅读:
    Python3三位运算
    PyThon3函数的使用
    PyThon3类的基本使用
    PyThon3类的继承
    Python3方法重写
    【BZOJ3307】雨天的尾巴-线段树合并+树上差分
    【CF893F】Subtree Minimum Query-主席树
    【BZOJ2212】Tree Rotations(POI2011)-平衡树启发式合并
    【BZOJ2733】永无乡(HNOI2012)-平衡树启发式合并
    【BZOJ3160】万径人踪灭-FFT+Manacher
  • 原文地址:https://www.cnblogs.com/sunyan-blog/p/11965545.html
Copyright © 2011-2022 走看看