功能基本和pc端一致
可以自动播放图片手指可以拖动播放轮播图 自动播放功能 开启定时器移动端移动，可以使用translate 移动可以添加过渡效果 无缝滚动 判断条件是：等到图片滚动完毕再去判断，就是过渡完成后判断此时需要添加过渡完成事件 transitionend判断条件：如果索引号为 3 （图片是3张 ，但实际添加的是5张 详情见代码），说明走到最后一张，此时索引号要复原为0此时图片去除过渡效果，然后移动如果索引号小于0 ，说明是倒着走，索引号等于2 小圆点跟随变化效果 把ol里面li带有current 类名的选出来去除类名让当前索引号的li加上 current但是，是等着过渡结束后变化，所以这个写到transitionend 事件里面ps: classList 是HTML5新增的一个属性，返回元素的类名，但ie10以上版本才支持，在移动端可以随意使用 此方法用于在元素中添加，移除及切换CSS类 （1）添加类 element.classList.add(‘类名’) 是在后面追加类名 不会覆盖原来的类 与className(覆盖以前的类名)不同 （2）移除类 element.classList.remove(‘类名’) （3）切换类element.classList.toggle(‘类名’) 自动判断元素是否有这个类，如果有，就去除，如果没有，就加上
<style> .bg { background: #000; } </style> </head> <body> <div class="one two"></div> <button>开关灯</button> </body> <script> var div = document.querySelector("div"); console.log(div.classList); //返回的是一个伪数组 console.log(div.classList[0]); //打印第一个类名 one //1.添加类 element.classList.add('类名') //是在后面追加类名 不会覆盖原来的类 与className(覆盖以前的类名)不同 div.classList.add("three"); console.log(div.classList[2]); //打印three //2.移除类 element.classList.remove('类名') div.classList.remove("three"); //3.切换类element.classList.toggle('类名') var btn = document.querySelector("button"); btn.addEventListener("click", function () { document.body.classList.toggle("bg"); //自动判断元素是否有这个类，如果有，就去除，如果没有，就加上 }); </script> 手指滑动轮播图 本质就是ul 跟随手指移动，简单说就是移动端拖动元素触摸元素 touchstart 获取手指初始坐标移动手指 touchmove 计算手指的滑动距离，并且移动盒子离开手指 touchend 根据滑动距离分不同情况如果移动距离小于某个像素，就回弹原来的位置如果移动距离大于某个像素，就上一张/下一张 滑动总体代码如下： html / css 代码：
<style> * { margin: 0; padding: 0; } html { font-size: 20px; } .focus { position: relative; padding-top: 10px; /* 让其他的图片隐藏 只显示一张图片 */ /* overflow: hidden; */ } .focus ul{ overflow: hidden; /*清除浮动*/ width: 500%; /* 因为下面滚动的问题 在第一张的前面加了一张图片 需要显示原来的第一张图片 */ margin-left: -100%; /* 这里所有百分比都是相对于父亲的 */ } .focus ul li{ float: left; width: 20%; /* 这里的宽度用的100% 如果像pc端那样 给ul一个超大的宽度 img浮动 img继承的是ul的宽度 img也会变大 */ /* width: 100%; */ /* 如果用百分比 可以让每个img（5张图片）的宽度平均占父级元素的宽度*/ height: 3rem; } .foucus img { width: 100%; height: 3rem; } .focus ol{ position: absolute; bottom: 5px; right: 5px; margin: 0; } .focus ol li{ display: inline-block; width: 5px; height: 5px; background-color: #fff; list-style: none; border-radius: 2px; transition: all .3s; } .focus ol li.current{ width: 15px; } </style> <script src="js/index.js"></script> </head> <body> <div class="focus"> <ul> <li><img src="images/mobile3.jpg" alt=""></li> <li><img src="images/mobile1.jpg" alt=""></li> <li><img src="images/mobile2.jpg" alt=""></li> <li><img src="images/mobile3.jpg" alt=""></li> <li><img src="images/mobile1.jpg" alt=""></li> <!-- 因为移动端和pc端不同 移动端需要手指拖动 在第一张向左拖动的时候 需要显示最后一张 但是做无缝滚动 最后一张是第一张 所以应该在第一张的前面再加一张图片 --> </ul> <!-- 小圆点 --> <ol> <li class="current"></li> <li></li> <li></li> <li></li> </ol> </div> </body>JS代码：
window.addEventListener("load", function () { var focus = document.querySelector(".focus"); var ul = focus.children[0]; //获得focus 的宽度 var w = focus.offsetWidth; var ol = focus.children[1]; //1.利用定时器自动轮播图片 var index = 0; var timer = setInterval(function () { index++; var translateX = -index * w; ul.style.transition = "all .3s"; //添加过渡效果 ul.style.transform = "translateX(" + translateX + "px)"; }, 2000); //等到过渡完成后再去判断，就是过渡完成后判断 监听渡完成事件 transitionend ul.addEventListener("transitionend", function () { //2.无缝滚动 //判断条件：如果索引号大于等于3 就说明走到了最后一张图片，此时索引号要复原为0 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快速的跳到目标位置 ul.style.transition = "none"; //利用最新的索引乘以宽度 去滚动图片 var translateX = -index * w; ul.style.transform = "translateX(" + translateX + "px)"; } //3.小圆点跟随变化效果 //把ol里面li带有current 类名的选出来去除类名 remove ol.querySelector("li.current").classList.remove("current"); //让当前索引号的li加上 current add 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(); //阻止滚动屏幕的效果 }); //离开手指 touchend 根据滑动距离分不同情况 ul.addEventListener("touchend", function (e) { if (flag) { //(1)如果移动距离大于50像素，就上一张/下一张 滑动 if (Math.abs(moveX) > 50) { //添加绝对值，因为可能是负值 if (moveX > 0) { //moveX 是正值 就是右滑 播放上一张 index--; } //moveX 是负值 就是左滑 播放下一张 else { index++; } var translateX = -index * w; ul.style.transition = "all .3s"; ul.style.transform = "translateX(" + translateX + "px)"; //(2)如果移动距离小于50像素，就回弹原来的位置 } else { var translateX = -index * w; ul.style.transition = "all .1s"; 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)"; }, 2000); }); });