var sliderData = (function(cb){ document.getElementById('slider').addEventListener('touchstart',touchstart, false); document.getElementById('slider').addEventListener('touchmove',touchmove, false); document.getElementById('slider').addEventListener('touchend',touchend, false); var pageDom = document.getElementsByClassName('page')[0]; var rightEarDom = document.getElementsByClassName('right-ear')[0]; var leftEarDom = document.getElementsByClassName('left-ear')[0]; var scheduleChildLine = document.getElementsByClassName('schedule-child-line')[0]; var width = 650; var startX = 0; var translateX = 0; var startTime; var newTranslateX; var distance = 0; var startTranslate; var isSlide = false; var SlideNumber = 1; function touchstart(e){ startX = e.touches[0].clientX; startTime = new Date().getTime(); startTranslate = translateX; isSlide = true; SlideNumber++; } function touchmove(e){ if (!isSlide || sliderNumber == 0) return var currentX = e.touches[0].clientX //2端溢出不能滑动 if (startTranslate == 0 && currentX > startX) return; if (Math.abs(startTranslate) == width * (sliderNumber - 1) && currentX < startX) return; // 向右滑动时, 没数据无法滑动 if (currentX < startX) { } distance = currentX - startX; translateX = currentX - startX + startTranslate; document.getElementById("slider-list").style.transform = "translateX("+translateX/100+"rem)"; } function touchend(){ if (!isSlide || sliderNumber == 0) return if (SlideNumber>2 && Math.abs(distance) < 10){ //正在滑动 又开始滑动 translateX = -(+width/100)*(parseInt(pageNum)); document.getElementById("slider-list").style.transform = "translateX("+translateX/100+"rem)"; return } var duration = +new Date() - startTime if (translateX > startTranslate) { // 向左划 if (distance > width / 3 || (distance > 40 && duration < 600)) { newTranslateX = startTranslate + width; } else { newTranslateX = startTranslate; } if(pageNum == Math.abs(newTranslateX / width) + 1){ pageNum = Math.abs(newTranslateX / width) //解决cb中pageNum不是最新的 cb(); } } else { // 向右划 if (Math.abs(distance) > width / 3 || (Math.abs(distance) > 40 && duration < 600)) { newTranslateX = startTranslate - width; } else { newTranslateX = startTranslate; } if(pageNum == Math.abs(newTranslateX / width) - 1){ pageNum = Math.abs(newTranslateX / width) //解决cb中pageNum不是最新的 cb(); } } translateX = newTranslateX; isSlide = false; distance = 0; pageNum = Math.abs(newTranslateX / width) document.getElementById("slider-list").style.transform = "translateX("+translateX/100+"rem)" lineMove(); SlideNumber = 1; } //点击左耳朵 leftEarDom.addEventListener('click',() => { if (pageNum == 0) return; startTranslate = translateX; newTranslateX = startTranslate + width; translateX = newTranslateX; document.getElementById("slider-list").style.transform = "translateX("+translateX/100+"rem)" lineMove(); }) //点击右耳朵 rightEarDom.addEventListener('click',() => { if (pageNum === sliderNumber - 1) return; startTranslate = translateX; newTranslateX = startTranslate - width; translateX = newTranslateX; document.getElementById("slider-list").style.transform = "translateX("+translateX/100+"rem)"; lineMove(); cb(); }) //下方进度条移动 function lineMove(){ pageNum = Math.abs(newTranslateX / width); let oneSlider = 36/sliderNumber, transformSlider = oneSlider*pageNum; scheduleChildLine.style.width = `${oneSlider}px`; scheduleChildLine.style.transform = `translateX(${transformSlider}px)`; pageDom.innerText = `${pageNum + 1}/${sliderNumber}页` } })(getLists)