代码实现：
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 > <ul> <li> <img src="https://s1.ax1x.com/2020/10/22/Bi1ZKU.jpg" alt=""> </li> <li> <img src="https://s1.ax1x.com/2020/10/22/Bi1mb4.jpg" alt=""> </li> <li> <img src="https://s1.ax1x.com/2020/10/22/Bi1erF.md.jpg" alt=""> </li> <li> <img src="https://s1.ax1x.com/2020/10/22/Bi1ZKU.jpg" alt=""> </li> <li> <img src="https://s1.ax1x.com/2020/10/22/Bi1mb4.jpg" alt=""> </li> </ul> <!-- 小圆点 --> <ol> <li ></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); });});原文转载：http://www.shaoqun.com/a/481498.html
auditor：https://www.ikjzd.com/w/2437
prime：https://www.ikjzd.com/w/129
tiki：https://www.ikjzd.com/w/2053
代码实现：mobileAutoPlay.html（复制并保存为html文件，打开并切换为移动端显示，即可见效果）：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content=&q
Sunrate：https://www.ikjzd.com/w/2685
002315焦点科技：https://www.ikjzd.com/w/1831
eBay卖家免费工具大全：https://www.ikjzd.com/tl/100838
利润暴跌老臣离去，百度该何去何从？：https://www.ikjzd.com/home/94037
美国防疫措施_美国防疫措施新闻资讯_美国防疫措施报道：http://www.shaoqun.com/s/%E7%BE%8E%E5%9B%BD%E9%98%B2%E7%96%AB%E6%8E%AA%E6%96%BD.aspx
No comments:
Post a Comment