<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>移動輪播圖</title> <style> * { padding: 0; margin: 0; } li { list-style: none; } .banner { position: relative; /*padding-top: 44px;*/ overflow: hidden; } .banner img { width: 100%; } .banner ul { overflow: hidden;/*清楚浮動*/ width: 500%; margin-left: -100%;/*讓第一張漏出來 不添加的話是最后一張*/ } .banner ul li { float: left; width: 20%; /*500%的20% 就是100%*/ } .banner ol { position: absolute; bottom: 5px; right: 5px; margin: 0;/*清除ol的默認值*/ } .banner ol li { display: inline-block; width: 5px; height: 5px; background-color: #fff; list-style: none; border-radius: 2px; transition: all .3s; } .banner ol li.current { width: 15px; } </style> </head> <body> <div class="banner"> <ul> <li><img src="image/b3.jpg" alt=""></li> <li><img src="image/b1.jpg" alt=""></li> <li><img src="image/b2.jpg" alt=""></li> <li><img src="image/b3.jpg" alt=""></li> <li><img src="image/b1.jpg" alt=""></li> </ul> <!-- 小圓點 --> <ol> <li class="current"></li> <li></li> <li></li> </ol> </div> <script> var banner = document.querySelector('.banner'); var ul = banner.children[0];//做運動的主體 var ol = banner.querySelector('ol'); var bannerW = banner.offsetWidth; console.log(bannerW); var index = 0; // 圖片自動播放 //1.1 開啟定時器 var timer = setInterval(function () { index++; var translatex = -index * bannerW ; //給ul添加過渡效果 讓圖片優雅的移動 ul.style.transition = 'all .3s'; ul.style.transform = 'translateX('+ translatex + 'px)'; },2000); //1.2 圖片無縫滾動 不能直接判斷 因為有過渡效果 有延時 //等過渡完成后 再去判斷 監聽過渡完成的事件 transitionend ul.addEventListener('transitionend',function () { //判斷是否到了最后一張 if (index == 3) { index = 0; ul.style.transition = 'none';//去掉過渡效果 讓ul快速跳到目標位置 var translatex = -index * bannerW ;//利用最新的索引號 * 寬度 繼續去滾動圖片 ul.style.transform = 'translateX('+ translatex + 'px)'; } //判斷是否到了第一張 if (index < 0) { index = 2; ul.style.transition = 'none';//去掉過渡效果 讓ul快速跳到目標位置 var translatex = -index * bannerW ;//利用最新的索引號 * 寬度 繼續去滾動圖片 ul.style.transform = 'translateX('+ translatex + 'px)'; } // 3. 小圓點跟隨變化 // 把ol里面li帶有current類名的選出來去掉類名 remove ol.querySelector('.current').classList.remove('current'); // 讓當前索引號 的小li 加上 current add ol.children[index].classList.add('current'); }); //2 手指滑動輪播圖 //2.1 觸摸元素 獲得手指做標的值 var startX = 0; var moveX = 0; var flag = false; ul.addEventListener('touchstart',function(e){ startX = e.targetTouches[0].pageX; clearInterval(timer); }); //2.2 移動手指 計算手指的滑動距離 並且移動盒子 ul.addEventListener('touchmove',function (e) { //移動的距離 = 滑動的距離 - 初始的距離 moveX = e.targetTouches[0].pageX - startX; console.log(moveX); //移動盒子 盒子原來的位置 + 手指移動的距離 var translatex = -index * bannerW + moveX; //手指拖動的時候 不需要動畫效果 所以取消過渡效果 ul.style.transition = 'none'; ul.style.transform = 'translateX('+ translatex + 'px)'; flag = true; // 如果用戶手指滑動過 就設置為true 如果沒有滑動 flag就一直是false e.preventDefault(); // 阻止滾動屏幕的行為 }); //4 手指離開屏幕 根據滑動距離分不同的情況 //如果移動距離小於某個像素 就回彈回去 //如果移動距離大於某個像素 就上一張 下一張 滑動 ul.addEventListener('touchend',function(){ if (flag) { //如果是true才做判斷計算尺寸 如果是法拉色就不執行 //4.1 大於50的操作 播放圖片 if (Math.abs(moveX) > 50) { //moveX 有可能是負值 所以取絕對值 //如果是右滑 播放上一張 moveX是正值 //如果是左滑 播放下一張 moveX是負值 if (moveX > 0) {//大於0 就是正值 index--; } else {//小於0 就是負值 index++; } var translatex = -index * bannerW; ul.style.transition = 'all 0.3s'; ul.style.transform = 'translateX('+ translatex + 'px)'; } else {//4.2 小於50的操作 回彈 var translatex = -index * bannerW; ul.style.transition = 'all 0.3s'; ul.style.transform = 'translateX('+ translatex + 'px)'; } } //5 手指離開屏幕 定時器重新開始 clearInterval(timer); //開啟前先把前面的定時器清除 保證頁面只有一個定時器 timer = setInterval(function(){ index++; var translatex = -index * bannerW ; //給ul添加過渡效果 讓圖片優雅的移動 ul.style.transition = 'all .3s'; ul.style.transform = 'translateX('+ translatex + 'px)'; },2000) }); </script> </body> </html>
