JavaScript实现移动端轮播图效果
Posted 。
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript实现移动端轮播图效果相关的知识，希望对你有一定的参考价值。
功能描述：
自动无缝轮播图片，底部小圆点跟图片保持一致；手指左右移动轮播图，移动距离大于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 })
以上是关于JavaScript实现移动端轮播图效果的主要内容，如果未能解决你的问题，请参考以下文章