slide.js
- 原生js寫的輪播兼容 pc+挪動端 插件，支撐輪播速率，輪播內容，輪播間隔，手勢靈敏度自定義，導航圓點點擊跳轉,手勢滑動。
- 運用申明：slide.js文件包括小部分es6語法編寫的文件，在挪動端有兼容性問題，僅供於源碼參考。挪動端跟pc端開闢援用js文件直接下載slide-es5.js舉行引入運用。
html代碼
<div id="slide" style="height:200px;width:300px;height:100px;border:1px solid #ccc">
<div class="room">
<img src="http://chenjianguang.com/static/callName/images/1.png" alt="" class="slide-item">
<img src="http://chenjianguang.com/static/callName/images/2.png" alt="" class="slide-item">
<img src="http://chenjianguang.com/static/callName/images/3.png" alt="" class="slide-item">
<img src="http://chenjianguang.com/static/callName/images/4.png" alt="" class="slide-item">
<img src="http://chenjianguang.com/static/callName/images/5.png" alt="" class="slide-item">
</div>
</div>
必需須要設置：包裹元素的id，以及高度跟寬度
- 包裹元素下面須要追隨一個div，div下面是帶有class屬性為slide-item的恣意元素
js代碼：
//須要先引入插件
<script src="./slid-es5.js"></script>
<script> slide = new Slide('slide',3000,1,20); </script>
//第一個參數是設置了輪播的包裹元素的id，是必需參數
//第二個參數是輪播間隔，非必需參數，默以為3000ms
//第三個參數是輪播速率, 非必需參數，默以為1，數值越大輪播速率越快
//第四個參數是手指滑動靈敏度，非必需參數，默以為20，數值越大須要滑動觸發的間隔就越大
這是上面代碼的slide Demo
空話不多說，下面完成代碼跟解釋申明
(function () {
let Slide = function (
slideId = 'slide',
timeOut = 3000,
speed = 0.1,
d = 20
) {
this.d = d;//滑動靈敏度
this.timeOut = timeOut;//輪播間隔
this.slide = document.querySelector('#slide'); //獵取視窗層
this.room = this.slide.querySelector('div'); //獵取內容層
this.imgs = [...this.slide.querySelectorAll('.slide-item')]; //輪播圖元素組
this.slideWidth = parseInt(getComputedStyle(this.slide).width); //視窗層高度
this.slideHeight = parseInt(getComputedStyle(this.slide).height); //視窗層寬度
this.startPoint = null; //手指觸摸的出發點
this.navButtons = null; //獵取到一切的導航圓點
this.timer = null; //定時器
this.imgIndex = 1; //當前輪播圖片index
this.prev = null; //上一個
this.next = null; //下一個
this.speed = -(this.slideWidth / 10 * speed); //動畫速率
this.resetCss(); //初始化css款式
this.resetAll(); //初始化設置
this.imgs.forEach((el) => {
el.style.height = `${this.slideHeight}px`;
el.style.width = `${this.slideWidth}px`;
}); //使圖片的寬度跟視窗層一樣
this.autoStart = setInterval(() => {
this.nextItem()
}, timeOut);
//輪播間隔定時器
for (let i = 0; i < this.navButtons.length; i++) {
this.navButtons[i].onclick = this.navButtonClick.bind(this);
} //綁定導航圓點點擊事宜
//綁定觸摸最先事宜
this.slide.addEventListener('touchstart', this.touchstart.bind(this));
//綁定觸摸完畢事宜
this.slide.addEventListener('touchend', this.touchend.bind(this));
}
//初始化款式
Slide.prototype.resetCss = function () {
let styleEle = document.createElement('style'); //建立style標籤
let navLeft = this.slideWidth / 2 - this.imgs.length * 9;
let navTop = this.slideHeight / 40;
styleEle.innerHTML += '.slide{position:relative;overflow:hidden;font-size:0;}'; //溫馨化slide視窗的款式
styleEle.innerHTML += '.slide .room{position:absolute;}'; //初始化room內容層的款式
styleEle.innerHTML += '.slide .slide-item{display:inline-block;}'; //設置slide-item的款式為內聯塊級元素
styleEle.innerHTML += `.slide .nav{padding:0 4px;list-style:none;position:absolute;font-size:0px;bottom:${navTop}px;left:${navLeft}px;text-align:center;}`;
styleEle.innerHTML += '.navButton{display:inline-block;margin:6px 4px;background:#fff;width:8px;height:8px;-moz-border-radius:8px;border-radius:8px;cursor:pointer;box-shadow:0 0 6px #bbb;}';
document.head.appendChild(styleEle); //插進去標籤
}
Slide.prototype.resetAll = function () {
this.slide.setAttribute('class', 'slide'); //給slide元素增添class屬性
this.room.setAttribute('class', 'room'); //給room元素增添class屬性
this.room.style.left = `0px`; //設置room的初始間隔
this.room.style.width = `${this.slideWidth * (this.imgs.length)}px`; //設置內容層的寬度
//建立導航圓點定位框
let nav = document.createElement('ul');
nav.id = 'nav';
nav.setAttribute('class', 'nav');
this.slide.appendChild(nav);
for (let i = 0; i < this.imgs.length; i++) {
let navButtonLi = document.createElement('li');
navButtonLi.setAttribute('class', 'navButton');
navButtonLi.index = i + 1;
nav.appendChild(navButtonLi);
}
this.navButtons = this.slide.querySelectorAll('li'); //獵取一切的li節點
this.navButtons[0].style.background = '#333'; //初始化第一個圓點的色彩
}
//切換下一個的函數
Slide.prototype.nextItem = function () {
//消滅過分定時器
clearInterval(this.timer);
//消滅間隔播放定時器
clearInterval(this.autoStart);
this.timer = setInterval(() => {
let left = parseInt(this.room.style.left);
if (this.imgIndex < this.imgs.length) {
if (left > (-this.slideWidth * this.imgIndex)) {
this.room.style.left = `${parseInt(this.room.style.left)+this.speed}px`;
} else {
clearInterval(this.timer);
this.room.style.left = `${-this.slideWidth*this.imgIndex}px`;
this.navButtons[this.imgIndex - 1].style.background = '#fff';
this.imgIndex++;
this.navButtons[this.imgIndex - 1].style.background = '#333';
}
} else {
if (left < 0) {
this.room.style.left = `${parseInt(this.room.style.left)+(-this.speed*2)}px`;
} else {
clearInterval(this.timer);
this.room.left = '0';
this.navButtons[this.imgIndex - 1].style.background = '#fff';
this.imgIndex = 1;
this.navButtons[this.imgIndex - 1].style.background = '#333';
}
}
}, 16.7);
this.autoStart = setInterval(() => {
this.nextItem()
}, this.timeOut);
}
Slide.prototype.lastItem = function () {
clearInterval(this.timer);
clearInterval(this.autoStart);
this.timer = setInterval(() => {
let left = parseInt(this.room.style.left);
if (this.imgIndex > 1) {
if (left < (-this.slideWidth * (this.imgIndex - 2))) {
this.room.style.left = `${parseInt(this.room.style.left)-this.speed}px`;
} else {
clearInterval(this.timer);
this.room.style.left = `${-this.slideWidth*(this.imgIndex-2)}px`;
this.navButtons[this.imgIndex - 1].style.background = '#fff';
this.imgIndex--;
this.navButtons[this.imgIndex - 1].style.background = '#333';
}
} else {
if (left > -this.slideWidth * (this.imgs.length - 1)) {
this.room.style.left = `${parseInt(this.room.style.left)+(this.speed*2)}px`;
} else {
clearInterval(this.timer);
this.room.left = `${-this.slideWidth*this.imgs.length-1}px`;
this.navButtons[this.imgIndex - 1].style.background = '#fff';
this.imgIndex = this.imgs.length;
this.navButtons[this.imgIndex - 1].style.background = '#333';
}
}
}, 16.7);
this.autoStart = setInterval(() => {
this.nextItem()
}, this.timeOut);
}
Slide.prototype.navButtonClick = function ({
target
}) {
clearInterval(this.autoStart);
clearInterval(this.timer);
this.timer = setInterval(() => {
let left = parseInt(this.room.style.left);
if (target.index > this.imgIndex) {
if (left > -this.slideWidth * (target.index - 1)) {
this.room.style.left = `${parseInt(this.room.style.left)+this.speed*(target.index-this.imgIndex)}px`;
} else {
clearInterval(this.timer);
this.room.style.left = `${-(this.slideWidth)*(target.index-1)}px`;
this.navButtonStyle(target);
}
} else if (target.index < this.imgIndex) {
if (left < -this.slideWidth * (target.index - 1)) {
this.room.style.left = `${parseInt(this.room.style.left) - this.speed * (this.imgIndex - target.index)}px`;
} else {
clearInterval(this.timer);
this.room.style.left = `${(-this.slideWidth) * (target.index - 1)}px`;
this.navButtonStyle(target);
}
} else {
return false;
}
}, 16.7);
this.autoStart = setInterval(() => {
this.nextItem()
}, this.timeOut);
}
//導航圓點點擊事宜
Slide.prototype.navButtonStyle = function (target) {
target.style.background = '#333';
this.navButtons[this.imgIndex - 1].style.background = '#fff';
this.imgIndex = target.index;
}
//手指觸摸肇端觸發函數
Slide.prototype.touchstart = function (e = window.event) {
this.startPoint = e.touches[0];
}
//手指觸摸完畢觸發函數
Slide.prototype.touchend = function (e = window.event) {
let endPoint = e.changedTouches[0];
let x = endPoint.clientX - this.startPoint.clientX;
let y = endPoint.clientY - this.startPoint.clientY;
if (Math.abs(x) > this.d) {
if (x < 0) {
this.nextItem();
} else {
this.lastItem();
}
}
}
this.Slide = Slide;
})();
運用申明以及源代碼後續的優化，迎接關注我的github 插件地點
slide插件
迎接批評以及留言，同時迎接關注我的博客定時不斷地更新我的文章 陳建光的博客
