制作过程中容易发生错误的地方:
1.在制作轮播是需要在展示的图片前后都多加一张图,比如你要放1,2,3号图,那么需要再加2张图3,1,2,3,1.
2.图片打开看的是1号图,需要直接给它设置一个margin-left盒子宽度负值。如果在js中直接给一个translate宽度,会出现问题;
3.注意需要添加window.addEventListener('load', function() {}),等页面执行完毕之后再加载js
window.addEventListener('load', function() { var focus = document.querySelector('.focus'); var focus_ul = focus.querySelector('ul') var focus_ol = focus.querySelector('ol') var focus_width = focus.offsetWidth // 给ol自动生成小圆圈 for (var i = 0; i < focus_ul.children.length; i++) { var li = document.createElement('li') li.setAttribute('index', i) focus_ol.appendChild(li) } var first = focus_ul.children[0].cloneNode(true); var last = focus_ul.children[focus_ul.children.length - 1].cloneNode(true); // 为了做轮播图,把第一张图和最后一张图复制分别放在前后 focus_ul.insertBefore(last, focus_ul.children[0]); focus_ul.appendChild(first) // 默认第一个小圆圈是选中的 focus_ol.children[0].classList.add('current'); var index = 0; var timer = setInterval(function() { index++; var translatex = -index * focus_width; focus_ul.style.transition = 'all .3s'; focus_ul.style.transform = 'translateX(' + translatex + 'px)'; }, 2000); // 等着我们过渡完成之后,再去判断 监听过渡完成的事件 transitionend focus_ul.addEventListener('transitionend', function() { // 无缝滚动 if (index >= 3) { index = 0; // console.log(index); // 去掉过渡效果 这样让我们的ul 快速的跳到目标位置 focus_ul.style.transition = 'none'; // 利用最新的索引号乘以宽度 去滚动图片 var translatex = -index * focus_width; focus_ul.style.transform = 'translateX(' + translatex + 'px)'; } else if (index < 0) { index = 2; focus_ul.style.transition = 'none'; // 利用最新的索引号乘以宽度 去滚动图片 var translatex = -index * focus_width; focus_ul.style.transform = 'translateX(' + translatex + 'px)'; } // 3. 小圆点跟随变化 // 把ol里面li带有current类名的选出来去掉类名 remove focus_ol.querySelector('.current').classList.remove('current'); // 让当前索引号 的小li 加上 current add focus_ol.children[index].classList.add('current'); }); // 给图片设置move事件 var startX = 0; var moveX = 0; var flag = false; focus_ul.addEventListener('touchstart', function(e) { startX = e.targetTouches[0].pageX; clearInterval(timer); }) focus_ul.addEventListener('touchmove', function(e) { moveX = e.targetTouches[0].pageX - startX; var translatex = -index * focus_width + moveX; this.style.transition = 'none'; focus_ul.style.transform = 'translateX(' + translatex + 'px)'; e.preventDefault() flag = true; }) focus_ul.addEventListener('touchend', function(e) { if (flag) { if (Math.abs(moveX) > 50) { if (moveX > 0) { index--; } else { index++; } var translatex = -index * focus_width; focus_ul.style.transition = 'all .3s'; focus_ul.style.transform = 'translateX(' + translatex + 'px)'; } else { var translatex = -index * focus_width; focus_ul.style.transform = 'translateX(' + translatex + 'px)'; } } clearInterval(timer) timer = setInterval(function() { index++; var translatex = -index * focus_width; focus_ul.style.transition = 'all .3s'; focus_ul.style.transform = 'translateX(' + translatex + 'px)'; }, 2000); }) })