本文章介紹在移動端無縫隙輪播圖實現的原理，這個輪子比較簡單，但可以方便剛剛入門的同學參考。最終效果是在移動端無縫隙無限滑動，可以自定義輪播的速度。支援手勢左右滑動。最後會放上原始碼。
- HTML部分
<div class="outer" id="oneTest">
<div class="inner">
<div class="goIndex item" goUrl="https://www.baidu.com"
style="background-image:url(1.jpg)"></div>
<div class="goIndex item" goUrl="https://www.baidu.com"
style="background-image:url(2.jpg)"></div>
<div class="goIndex item" goUrl="https://www.baidu.com"
style="background-image:url(3.jpg)"></div>
</div>
<ul class="num"></ul>
</div>輪播圖的html就是這樣，我們配合著css來看，接下來上css。
- Css部分
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.outer {
margin: 0 auto;
width: 100%;
height: 150px;
overflow: hidden;
position: relative;
}
.inner {
height: 150px;
overflow: hidden;
width: 8000px;
}
.inner .goIndex {
float: left;
height: 150px;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
.num {
position: absolute;
left: 0;
right: 0;
bottom: 20%;
display: flex;
justify-content: center;
flex-direction: row;
align-items: center;
}
.num li {
margin: 0 3px;
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(0, 0, 0, .2);
}
.num li.select {
background: rgba(0, 0, 0, .7);
}我們通過css可以看到，.outer為最外層的殼，超出的部分都會隱藏，.inner為一個很長很長的容器，而item為單個item。結構比較簡單。ul就是小的控制點了，但移動端沒有點選小點的功能。
- 頁面中Js部分
//function dGun(obj = {}) 這是dGun.js的主函式
// 初始化兩個圖片輪播
dGun({id:"oneTest",time:10000});
dGun({id:"twoTest",time:4000});
// 點選後跳轉
var goList = document.getElementsByClassName("goIndex");
for (var i = 0; i < goList.length; i++) {
goList[i].addEventListener("click", function () {
window.location = this.getAttribute("goUrl")
})
}dGun()就是初始化輪播圖我們需要傳入引數，第一個引數id為.outer盒子的id，第二個為自動切換時間。下面的是簡單的點選跳轉功能。
- dGun.js 初始化部分
//function dGun(obj = {}) 包裹全部dGun內程式碼
var id = obj.id; //獲取domid
var time = obj.time ? parseInt(obj.time) : 3000; //預設3s
time = time > 300 ? time : 1000; //間隔必須大於300
var _width = document.querySelector("#"+id).offsetWidth; //獲取輪播圖寬度
var _index = 0; //當前是第幾個輪播 從-1開始
var inner = document.querySelector("#"+id+" .inner"); //獲取輪播內容外殼（很長的那個）
var items = document.querySelectorAll("#"+id+" .item"); //獲取輪播元素
// 將第一個元素複製到最後，將最後的元素複製到開頭
var firstItem = items[0];
var lastItem = items[items.length-1];
inner.insertBefore(lastItem.cloneNode(true),firstItem);
inner.appendChild(firstItem.cloneNode(true));
inner.style.transform = "translateX(-"+_width+"px)";
// 生成底部小圓點
var imgLength = document.querySelector("#"+id+" .inner").children.length-2;
var makeCir = `<li class="select"></li>`;
for (var i = 0; i < imgLength - 1; i++) {
makeCir += `<li></li>`;
}
document.querySelector("#"+id+" .num" ).innerHTML = makeCir;
//設定輪播的寬度。
var newItems = document.querySelectorAll("#"+id+" .item");
for(var i = 0; i<newItems.length;i++){
newItems[i].style.width = _width+"px";
}前幾行程式碼就不多介紹了，就是獲取dom，獲取寬度。
這裡說一下將第一個元素複製到最後，將最後的元素複製到開頭，這是實現無縫隙的關鍵，比如我們有3張圖片1/2/3進行輪播，這樣我們就需要將dom節點變為3/1/2/3/1，為什麼這樣做呢，輪播圖原理是多個item並列，我們通過translateX進行值的改變顯示不同區域，我們先將dom節點變為3/1/2/3/1，然後通過inner.style.transform = “translateX(-“+_width+”px)”;這句程式碼將初始化輪播顯示區域放到1這個圖片上。然後人們向右滑動，滑動到3的時候，再向右滑應該顯示1，而我們dom節點中3的右邊就是1，這樣向右滑動到末尾1的時候我們快速通過translateX移動到開頭1的位置來實現無縫隙輪播。
- 手勢滑動實現
var startX = 0, changedX = 0, originX = 0, basKey = 0;
//手指點選的X位置 滑動改變X的位置 inner的translateX的值 basKey是個鑰匙
function Broadcast() {
var that = this;
this.box = document.querySelector("#"+id+" .inner");
this.box.addEventListener("touchstart", function (ev) {
that.fnStart(ev);
})
}
// 輪播手指按下
Broadcast.prototype.fnStart = function (ev) {
clearInterval(autoPlay); //手指按下的時候清除定時輪播
if (!basKey) {
var that = this;
startX = ev.targetTouches[0].clientX;
var tempArr = window.getComputedStyle(inner).transform.split(",");
//獲取當前偏移量
if (tempArr.length > 2) {
originX = parseInt(tempArr[tempArr.length - 2]) || 0;
}
this.box.ontouchmove = function (ev) {
that.fnMove(ev)
}
this.box.ontouchend = function (ev) {
that.fnEnd(ev)
}
}
};
// 輪播手指移動
Broadcast.prototype.fnMove = function (ev) {
ev.preventDefault();
changedX = ev.touches[0].clientX - startX;
var changNum = (originX + changedX);
this.box.style.cssText = "transform: translateX(" + changNum + "px);";
};
// 輪播手指抬起
Broadcast.prototype.fnEnd = function (ev) {
// 移除底部按鈕樣式
document.querySelector("#"+id+" .select").classList.remove("select");
basKey = 1;
setTimeout(function () {
basKey = 0;
}, 300)
if (changedX >= 100) { //向某一方向滑動
var _end = (originX + _width);
this.box.style.cssText = "transform: translateX(" + _end + "px);transition:all .3s";
_index--;
if (_index == -1) { //滑動到第一個了，為了實現無縫隙，滾到最後去
document.querySelectorAll("#"+id+" .num>li")[imgLength - 1].classList.add("select");
play(-1);
}
} else if (changedX < -100) { //向負的某一方向滑動
var _end = (originX - _width);
this.box.style.cssText = "transform: translateX(" + _end + "px);transition:all .3s";
_index++;
if (_index == imgLength) { //滑到最後一個了，為了實現無縫隙，滾到前面去
play(imgLength);
document.querySelectorAll("#"+id+" .num>li")[0].classList.add("select");
}
} else { //滑動距離太短，沒吃飯不用管
this.box.style.cssText = "transform: translateX(" + originX + "px);transition:all .3s";
}
// 完成一次滑動初始化值
startX = 0;
changedX = 0;
originX = 0;
if (_index != -1 && _index != imgLength) {
document.querySelectorAll("#"+id+" .num>li")[_index].classList.add("select");
}
this.box.ontouchmove = null; //清除事件
this.box.ontouchend = null; //清除繫結事件
autoPlay = setInterval(lunbo, time) //開啟輪播
}我們定義Broadcast方法監聽使用者的觸屏按下事件
當手指按下時，我麼記錄手指按下的X軸位置，單後進行監聽移動和抬起的事件。
手指移動的時候我們要做到就是計算偏移量，並通過偏移量改變inner的位置。
手指抬起時，我們檢視偏移量十分大於100，這個值可以改，也可以改一下變成傳參。通過正負判斷方向，並通過index判斷當前是第幾個，如果是滑動到我們複製的第一個和最後一個節點，則執行play函式，我們接下來講解。然後改變控制點樣式就比較簡單了，最後初始化值，並清除監聽事件。
- play函式，快速滾
//首尾無縫連線
function play(index) {
setTimeout(function () {
inner.style.transition = `all 0s`;
if (index == -1) {
var _number = -imgLength * _width;
inner.style.transform = `translateX(` + _number + `px)`;
_index = imgLength - 1;
} else if (index == imgLength) {
inner.style.transform = `translateX(-` + _width + `px)`;
_index = 0;
}
}, 250);
}原理就是在圖片滑動完成的時候，快速設定滑動變化時間設為0，並改變translateX到應該去的位置。
- 定時切換圖片
function lunbo(){
document.querySelector("#"+id+" .select").classList.remove("select");
var tempArr = window.getComputedStyle(inner).transform.split(",");
if (tempArr.length > 2) {
originX = parseInt(tempArr[tempArr.length - 2]) || 0;
}
var _end = (originX - _width);
inner.style.cssText = "transform: translateX(" + _end + "px);transition:all .3s";
_index++;
if (_index != -1 && _index != imgLength) {
document.querySelectorAll("#"+id+" .num>li")[_index].classList.add("select");
}else if(_index == -1 ){
document.querySelectorAll("#"+id+" .num>li")[imgLength - 1].classList.add("select");
} else if (_index == imgLength) {
play(imgLength);
document.querySelectorAll("#"+id+" .num>li")[0].classList.add("select");
}
}
// 初始化輪播
var autoPlay = setInterval(lunbo,time); //開啟輪播
var _Broadcast = new Broadcast(); //例項觸控這個就是開啟個定時器，過固定的時間偏移inner的X，並根據是第幾個來判斷是否要執行play函式。
- https://github.com/Zhoujiando… 原始碼在這裡面，大家可以看一下，萌新如果感覺有幫助麻煩點下Star 點奇數次就好。 本人剛入行不久，大神們看著不順眼的地方麻煩提提意見，謝謝。最後提前給大家拜個早年。