JavaScript 移动端轮播图

  • A+
所属分类:Web前端

代码实现:

mobileAutoPlay.html(复制并保存为html文件,打开并切换为移动端显示,即可见效果):

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Document</title>     <link rel="stylesheet" href="https://blog-static.cnblogs.com/files/jacklzx/normalize.css">     <link rel="stylesheet" href="https://blog-static.cnblogs.com/files/jacklzx/mobileAutoPlay.css">     <script src="https://blog-static.cnblogs.com/files/jacklzx/mobileAutoPlay.js"></script> </head>  <body>     <!-- 焦点图 -->     <div class="focus">         <ul>             <li>                 <img src="https://s1.ax1x.com/2020/10/22/Bi1ZKU.jpg" alt="JavaScript 移动端轮播图" alt="">             </li>             <li>                 <img src="https://s1.ax1x.com/2020/10/22/Bi1mb4.jpg" alt="JavaScript 移动端轮播图" alt="">             </li>             <li>                 <img src="https://s1.ax1x.com/2020/10/22/Bi1erF.md.jpg" alt="JavaScript 移动端轮播图" alt="">             </li>             <li>                 <img src="https://s1.ax1x.com/2020/10/22/Bi1ZKU.jpg" alt="JavaScript 移动端轮播图" alt="">             </li>             <li>                 <img src="https://s1.ax1x.com/2020/10/22/Bi1mb4.jpg" alt="JavaScript 移动端轮播图" alt="">             </li>         </ul>         <!-- 小圆点 -->         <ol>             <li class="current"></li>             <li></li>             <li></li>         </ol>     </div> </body>  </html> 

mobileAutoPlay.css:

body {     max-width: 540px;     min-width: 320px;     margin: 0 auto;     font: normal 14px/1.5 Tahoma, "Lucida Grande", Verdana, "Microsoft Yahei", STXihei, hei;     color: #000;     background: #f2f2f2;     overflow-x: hidden;     -webkit-tap-highlight-color: transparent; }  div {     box-sizing: border-box; }  ul {     list-style: none;     margin: 0;     padding: 0; }  a {     text-decoration: none;     color: #222; }  .focus {     overflow: hidden;     position: relative;     margin-top: 44px; }  .focus ul {     overflow: hidden;     width: 500%;     margin-left: -100%; }  .focus ul li {     float: left;     width: 20%; }  .focus img {     width: 100%; }  .focus ol {     position: absolute;     bottom: 5px;     right: 5px;     margin: 0; }  .focus ol li {     display: inline-block;     width: 8px;     height: 8px;     background-color: #fff;     list-style: none;     border-radius: 4px;     transition: all .3s;     margin-left: 1px; }  .focus ol .current {     width: 15px; } 

mobileAutoPlay.js:

window.addEventListener('load', function() {     // 1. 获取元素     var focus = document.querySelector('.focus');     var ul = focus.children[0];     // 获取focus的宽度     var w = focus.offsetWidth;     var ol = focus.children[1];      // 2. 定时器轮播图片     var index = 0;     var timer = setInterval(function() {         index++;         var translatex = -index * w;         ul.style.transition = 'all .3s';         ul.style.transform = 'translateX(' + translatex + 'px)';     }, 1000);      // 等过渡完成后再判断     ul.addEventListener('transitionend', function() {         // 无缝滚动         if (index >= 3) {             index = 0;             // 去掉过渡效果 这样让我们的ul 快速的跳到目标位置             ul.style.transition = 'none';             // 利用最新的索引号乘以宽度 去滚动图片             var translatex = -index * w;             ul.style.transform = 'translateX(' + translatex + 'px)';         } else if (index < 0) {             index = 2;             ul.style.transition = 'none';             var translatex = -index * w;             ul.style.transform = 'translateX(' + translatex + 'px)';         }         // 3.小圆点跟随变化         // ol中的li带有current类型的选出来,删除类名         ol.querySelector('.current').classList.remove('current');         // 当前索引号加上current类名         ol.children[index].classList.add('current');     });     // 4. 手指滑动轮播图     // 触摸元素touchstart:获取手指初始坐标     var startX = 0;     var moveX = 0;     var flag = false;     ul.addEventListener('touchstart', function(e) {         startX = e.targetTouches[0].pageX;         // 手指触摸的时候,停止定时器         clearInterval(timer);     });     // 移动手指 touchmove:计算手指滑动的距离,并且移动盒子     ul.addEventListener('touchmove', function(e) {         // 计算移动距离         moveX = e.targetTouches[0].pageX - startX;         // 移动盒子:盒子原来的距离+手指移动的距离         var translatex = -index * w + moveX;         ul.style.transition = 'none';         ul.style.transform = 'translateX(' + translatex + 'px)';         flag = true;         e.preventDefault(); // 阻止滚动屏幕的默认行为     });     // 手指离开,根据滑动的距离判断是否到下一张     ul.addEventListener('touchend', function() {         // 移动大于50像素,滑动         if (flag) {             if (Math.abs(moveX) > 100) {                 // 右滑                 if (moveX > 0) {                     index--;                     // 左滑                 } else if (moveX < 0) {                     index++;                 }                 var translatex = -index * w;                 ul.style.transition = 'all .3s';                 ul.style.transform = 'translateX(' + translatex + 'px)';             } else {                 // 移动小于50像素,回弹                 var translatex = -index * w;                 ul.style.transition = 'all .3s';                 ul.style.transform = 'translateX(' + translatex + 'px)';             }         }         // 重新开启定时器,开启之前先清除定时器,保证当前只有一个定时器         clearInterval(timer);         timer = setInterval(function() {             index++;             var translatex = -index * w;             ul.style.transition = 'all .3s';             ul.style.transform = 'translateX(' + translatex + 'px)';         }, 1000);      }); });