原生js實現簡單的移動端輪播圖效果
阿新 • • 發佈：2018-12-16
近期接觸了移動端html5和css3，想加入些輪播圖，於是在網上搜集整理了一些資料，經自己補充改進使之較為完善
原生JavaScript 移動端web輪播圖片
實現功能
- 索引小圓點
- 過渡滑動動畫的定時輪播
- 移動端可以滑動切換圖片
- 滑動距離不夠則吸附回去
效果圖
程式碼
- slideshow.html
<!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"> <title>移動端-輪播圖</title> <link rel="stylesheet" href="slideshow.css"> </head> <body> <div class="layout"> <div class="banner"> <ul class="swipe" id="swipe"> <li><a href="#"><img src="images/l5.jpg"></a></li> <li><a href="#"><img src="images/l1.jpg"></a></li> <li><a href="#"><img src="images/l2.jpg"></a></li> <li><a href="#"><img src="images/l3.jpg"></a></li> <li><a href="#"><img src="images/l4.jpg"></a></li> <li><a href="#"><img src="images/l5.jpg"></a></li> <li><a href="#"><img src="images/l1.jpg"></a></li> </ul> <ul class="swipe-btn-list" id="swipe-btn-list"> <li class="now"></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> </div> <script src="base.js"></script> <script src="slideshow.js"></script> </body> </html> - slideshow.css
*, ::before, ::after{ padding: 0; margin: 0; -webkit-box-sizing: border-box;/*相容移動端主流瀏覽器*/ box-sizing: border-box; -webkit-tap-highlight-color: transparent;/*清除移動端點選高亮效果*/ } body{ font-family:Microsoft YaHei,sans-serif; font-size: 14px; color: #333; } ol,ul{ list-style: none; } /*清除浮動*/ .swipe::before, .swipe::after{ content: ""; display: block; height: 0; line-height: 0; visibility: hidden; clear: both; } .layout{ width: 100%; max-width: 750px; min-width: 320px; margin: 0 auto; position: relative; } .banner{ width: 100%; overflow: hidden; position: relative; } .swipe{ width: 1000%; -webkit-transform: translateX(-10%); transform: translateX(-10%); } .swipe li{ width: 10%; float: left; } .swipe li a{ display: block; width: 100%; } .swipe li a img{ width: 100%; display: block; } .swipe-btn-list{ position: absolute; bottom: 6px; width: 100%; text-align: center; } .swipe-btn-list li{ width: 6px; height: 6px; border: 1px solid #fff; border-radius: 50%; display: inline-block; margin-left: 10px; } .swipe-btn-list li:first-child{ margin-left: 0; } .swipe-btn-list li.now{ background: #fff; } - base.js
/** * Improved by yanzuyue on 2018/10/20. */ /*封裝一些公用的事件或者公用的方法*/ /*定義的一個名稱空間*/ window.my = {}; /*封裝一個事件 過渡結束事件*/ my.transitionEnd = function(dom,callback){ //1.給誰加事件 //2.事件觸發後處理什麼業務 if(!dom || typeof dom != 'object'){ //沒dom的時候或者不是一個物件的時候 程式停止 return false; } dom.addEventListener('transitionEnd', function(){ callback && callback(); }); dom.addEventListener('webkitTransitionEnd', function(){ callback && callback(); }); } - slideshow.js
/** * Improved by yanzuyue on 2018/10/20. */ window.onload = function(){ /* * 1.設定定時器 自動輪播 無縫銜接 * 2.點需要隨著輪播的滾動改變對應的點 改變當前樣式 * 3.手指滑動的時候讓輪播圖滑動 touch事件 記錄座標軸的改變 改變輪播圖的定位（位移css3） * 4.當滑動的距離不超過一定的距離的時候 需要吸附回去 * 5.當滑動超過了一定的距離 需要跳到下一張或者上一張 * */ var imageCount = 5; //頁面中用來輪播的圖片有5張 var banner = document.querySelector('.banner');//輪播圖大盒子 var width = banner.offsetWidth;//圖片的寬度 var imageBox = document.getElementById("swipe");//圖片盒子 var pointBox = document.getElementById("swipe-btn-list");//點盒子 var points = pointBox.querySelectorAll('li');//所有的點 //公用方法 //加過渡滑動動畫（CSS3 transition 屬性）（根據需要可新增ease,linear等屬性） var addTransition = function(){ imageBox.style.transition = "all 0.3s"; imageBox.style.webkitTransition = "all 0.3s"; }; //清除過渡（清除圖片的 transition 屬性） var removeTransition = function(){ imageBox.style.transition = "none"; imageBox.style.webkitTransition = "none"; } //設定圖片的位置，定位（CSS3 transform 屬性） var setTranslateX = function(translateX){ imageBox.style.transform = "translateX("+translateX+"px)"; imageBox.style.webkitTransform = "translateX("+translateX+"px)"; } //自動輪播 定時器 無縫銜接 動畫結束瞬間定位 var index = 1; var timer = setInterval(function(){ index++; //自動輪播到下一張 //改變定位 動畫的形式去改變 transition transform translate addTransition(); //加過渡動畫 setTranslateX(-index * width); //定位 if(index > imageCount) index = 1; setPoint(); },3500);//設定每隔3.5秒切換一次 //等過渡結束之後來做無縫銜接 my.transitionEnd(imageBox, function(){ removeTransition(); //清除過渡 setTranslateX(-index * width); //定位 }); //改變當前樣式 當前圖片的索引（小圓點） var setPoint = function(){ //清除上一次的now for(var i = 0 ; i < points.length ; i++){ points[i].className = " "; } //給圖片對應的點加上樣式 points[index-1].className = "now"; } /* 手指滑動的時候讓輪播圖滑動 touch事件 記錄座標軸的改變 改變輪播圖的定位（位移css3） 當滑動的距離不超過一定的距離的時候 需要吸附回去 過渡的形式去做 當滑動超過了一定的距離 需要 跳到 下一張或者上一張 （滑動的方向） 一定的距離（螢幕的三分之一） */ //touch事件 var startX = 0; //記錄起始 剛剛觸控的點的位置 x的座標 var moveX = 0; //滑動的時候x的位置 var distanceX = 0; //滑動的距離 var isMove = false; //是否滑動過 imageBox.addEventListener('touchstart', function(e){ clearInterval(timer); //清除定時器 startX = e.touches[0].clientX; //記錄起始X }); imageBox.addEventListener('touchmove',function(e){ moveX = e.touches[0].clientX; //滑動時候的X distanceX = moveX - startX; //計算移動的距離 //計算當前定位 -index*width+distanceX removeTransition(); //清除過渡 setTranslateX(-index * width + distanceX); //實時的定位 isMove = true; //證明滑動過 }); //在模擬器上模擬的滑動會有問題 丟失的情況 最後在模擬器的時候用window imageBox.addEventListener('touchend', function(e){ // 滑動超過 1/4 即為滑動有效，否則即為無效，則吸附回去 if(isMove && Math.abs(distanceX) > width/4){ //5.當滑動超過了一定的距離 需要 跳到 下一張或者上一張 （滑動的方向）*/ if(distanceX > 0){ //上一張 index --; } else{ //下一張 index ++; } } addTransition(); //加過渡動畫 setTranslateX(-index * width); //定位 if(index > imageCount ){ index = 1; }else if(index <= 0){ index = imageCount; } setPoint(); //重置引數 startX = 0; moveX = 0; distanceX = 0; isMove = false; //加定時器 clearInterval(timer); //嚴謹 再清除一次定時器 timer = setInterval(function(){ index++; addTransition(); setTranslateX(-index * width); if(index > imageCount) index = 1; setPoint(); },3500); }); };