原生js實現無縫滾動輪播圖（移動端）-自動輪播
阿新 • • 發佈：2019-02-15
想不依賴任何外掛和庫，就用原生js實現移動端自動輪播，發現網上的都不盡如人意，乾脆自己寫一個，程式碼有部分參考，廢話少說，上程式碼。
- head部分，沒什麼好說的：
<meta charset="utf-8">
<meta name="copyright" content="">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <div class="banner" id="banner">
<div class="slider_list">
<div class="swiper-slide">
<a href="javascript:;">
<img 3.css部分：
* {
margin: 0;
padding: 0;
}
body{
margin: 0 auto;
max-width: 600px;
}
ul,
ol {
list-style: none;
}
.banner {
position: relative;
background-color: #FFFFFF;
margin-top: 20px;
overflow: hidden;
}
.banner:after {
content: '';
display: block;
height: 0;
visibility: hidden;
line-height: 0;
clear: both;
}
.swiper-slide {
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
position: relative;
-webkit-transition-property: -webkit-transform;
transition-property: -webkit-transform;
-o-transition-property: transform;
transition-property: transform;
transition-property: transform, -webkit-transform;
}
.banner .slider_list .swiper-slide {
float: left;
flex-shrink: 0;
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
-webkit-transition-property: -webkit-transform;
transition-property: -webkit-transform;
-o-transition-property: transform;
transition-property: transform;
transition-property: transform, -webkit-transform;
}
.banner .slider_list a {
display: block;
}
.banner .slider_list img {
display: block;
width: 100%;
}
.banner .pagination {
position: absolute;
bottom: 0px;
left: 0;
right: 0;
text-align: center;
}
.banner .pagination li {
display: inline-block;
width: 10px;
height: 10px;
margin: 0 3px;
border-radius: 5px;
background: #e9e9e9;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.4);
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.4);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.4);
}
.banner .pagination li.active {
background: #fc6b00
} 4.核心內容，js部分
document.addEventListener('DOMContentLoaded', function() {
var slider_content = document.querySelector('#banner .slider_list');
var slider_items = slider_content.children;
var num = slider_items.length;
slider_content.style.width = (num + 2) * 100 + '%';
slider_content.style.transform = 'translateX(-' + 100 / (num + 2) + '%)';
slider_content.appendChild(slider_items[0].cloneNode(true));
slider_content.insertBefore(slider_items[num - 1].cloneNode(true), slider_items[0]);
var pagination = document.querySelector('#banner ol');
for(var i = 0; i < num; i++) {
var creatLi = document.createElement('li');
pagination.appendChild(creatLi);
}
for(var i = 0; i < num + 2; i++) {
slider_items[i].style.width = 100 / (num + 2) + '%';
}
var pagination_items = pagination.children;
pagination_items[0].classList.add('active');
var iNow = 1;
var x = -iNow * slider_items[0].offsetWidth;
//在這裡設定一個開關,是css運動結束後解鎖
var bReady = true;
slider_content.addEventListener('touchstart', function(ev) {
clearInterval(timer);
if(bReady == false) {
return;
}
bReady = false;
slider_content.style.transition = 'none';
var disX = ev.targetTouches[0].pageX - x;
var downX = ev.targetTouches[0].pageX;
function fnMove(ev) {
x = ev.targetTouches[0].pageX - disX;
slider_content.style.transform = 'translate3d(' + x + 'px,0,0)';
}
function fnEnd(ev) {
var upX = ev.changedTouches[0].pageX;
//判斷是否移動距離大於50
if(Math.abs(upX - downX) > 50) {
//左邊移動
if(upX - downX < 0) {
iNow++;
if(iNow == slider_items.length) {
iNow = slider_items.length - 1;
}
if(iNow == num + 1) {
pagination_items[num - 1].classList.remove('active');
pagination_items[0].classList.add('active');
} else {
pagination_items[iNow - 1].previousElementSibling.classList.remove('active');
pagination_items[iNow - 1].classList.add('active');
}
} else {
//右邊移動
iNow--;
if(iNow == -1) {
iNow = 0;
}
if(iNow == 0) {
pagination_items[0].classList.remove('active');
pagination_items[num - 1].classList.add('active');
} else {
pagination_items[iNow - 1].nextElementSibling.classList.remove('active');
pagination_items[iNow - 1].classList.add('active');
}
}
}
//儲存此時ul的位置
x = -iNow * slider_items[0].offsetWidth;
slider_content.style.transform = 'translate3d(' + x + 'px,0,0)';
slider_content.style.transition = '500ms all ease';
//監聽li 當移動到兩端的li時 瞬間移回
function tEnd() {
if(iNow == num + 1) {
iNow = 1;
}
if(iNow == 0) {
iNow = num;
}
slider_content.style.transition = 'none'
x = -iNow * slider_items[0].offsetWidth;
slider_content.style.transform = 'translate3d(' + x + 'px,0,0)';
bReady = true;
}
slider_content.addEventListener('transitionend', tEnd, false);
//釋放記憶體
document.removeEventListener('touchend', fnEnd, false);
document.removeEventListener('touchmove', fnMove, false);
}
document.addEventListener('touchmove', fnMove, false);
document.addEventListener('touchend', fnEnd, false);
//阻止預設事件
ev.preventDefault();
}, false);
//自動輪播
var timer=setInterval(function() {
iNow++;
if(iNow == num + 1) {
x = -1 * slider_items[0].offsetWidth;
pagination_items[num - 1].classList.remove('active');
pagination_items[0].classList.add('active');
slider_content.style.transition = 'none';
slider_content.style.transform = 'translate3d(' + 0 * slider_items[0].offsetWidth + 'px,0,0)';
setTimeout(function() {
slider_content.style.transition = '500ms all ease';
slider_content.style.transform = 'translate3d(' + x + 'px,0,0)';
})
bReady = true;
iNow = 1;
} else {
slider_content.style.transition = 'none';
x = -iNow * slider_items[0].offsetWidth;
slider_content.style.transform = 'translate3d(' + x + 'px,0,0)';
slider_content.style.transition = '500ms all ease';
bReady = true;
pagination_items[iNow - 1].previousElementSibling.classList.remove('active');
pagination_items[iNow - 1].classList.add('active');
}
}, 3000)
}, false);輪播的數量可以自定義，就在html部分增減就行，js會自動獲取數量，並新增底部小圓點。