原生js無縫輪播外掛使用詳解
阿新 • • 發佈：2020-03-10
這篇博文主要講如何使用原生js來實現一個相容 IE9+ 的無縫輪播圖。主要知識點如下：
- 面向物件
- js優化之節流函式
- js運動
效果
html結構
<div class="sliders-wraper" id="rotation-1"> <ul class="sliders clear"> <li class="slider" style="background:purple">5</li> <li class="slider" style="background:pink">1</li> <li class="slider" style="background:beige">2</li> <li class="slider" style="background:gold">3</li> <li class="slider" style="background:skyblue">4</li> <li class="slider" style="background:purple">5</li> <li class="slider" style="background:pink">1</li> </ul> <div class="pagenation"> <div class="page page-active"><a></a></div> <div class="page"><a></a></div> <div class="page"><a></a></div> <div class="page"><a></a></div> <div class="page"><a></a></div> </div> <span class='prev rotation-btn'><</span> <span class='next rotation-btn'>></span> </div>
css樣式
*{margin: 0;padding: 0;box-sizing: border-box;}
.clear{zoom: 0;}
.clear:after{content: '';display: block;overflow: hidden;clear: both;widows: 0;height: 0;}
.sliders-wraper{width: 100%;height: 400px;line-height: 400px;
overflow: hidden;position: relative;text-align: center;}
.sliders{position: absolute;list-style: none;font-size: 50px;}
.slider{float: left;}
.rotation-btn{position: absolute;top: 50%;width: 50px;height: 50px;
line-height: 50px;margin-top: -25px;font-size: 30px;color: #ccc;cursor: pointer;}
.prev{left:0;}
.next{right:0;}
.pagenation{position: absolute;bottom: 10px;width: 100%;height: 25px;line-height: 25px;}
.pagenation .page{width: 40px;height: 25px;display: inline-block;cursor: pointer;}
.pagenation .page a{display: block;width: 30px;height: 5px;border: 1px solid #ccc;
border-radius: 5px;background: transparent;margin: 10px auto;}
.pagenation .page-active a{border-color: #0076ff;background-color: #0076ff;}js
;(function(doc,win){
function Rotation(obj){
this.wraper = doc.getElementById(obj.el) //視窗
this.sliders = this.wraper.getElementsByClassName('sliders')[0] //圖片父盒子
this.slideList = this.sliders.getElementsByClassName('slider') //所有圖片
this.length = this.slideList.length
this.index = 1 //當前顯示的圖片的索引
this.timer = null //單張圖片運動定時器
this.animation = null //自動輪播定時器
// 在obj中可以自定義的引數
this.mode = 'easy-in-out'//動畫曲線，可選 'linear'
this.step = 5 //勻速運動滾動步長
this.delay = 2500 //輪播間隔
this.duration = 40 //單張圖片動畫時長
this.auto = true //是否開啟自動輪播
this.btn = false //是否有左右按鈕
this.focusBtn = true //是否支援焦點事件
for(var k in obj)
this[k] = obj[k]
if(this.btn){
this.prev = this.wraper.getElementsByClassName('prev')[0]
this.next = this.wraper.getElementsByClassName('next')[0]
}
if(this.focusBtn){
this.pagenation = this.wraper.getElementsByClassName('pagenation')[0]
this.pageList = this.pagenation.getElementsByClassName('page')
this.activePage = 0 //當前的焦點的索引
}
this.init()
}
var D = Rotation.prototype
/*
* func init
* 初始化函式
* @para 0
*/
D.init = function(){
this.width = this.wraper.clientWidth
if(this.mode == 'linear')
this.duration = 1
for(var i=0; i<this.length; i++)
this.slideList[i].style.width = this.width + 'px'
this.sliders.style.width = this.width * this.length + 'px'
this.sliders.style.marginLeft = -this.width + "px";
this.handler()
this.auto && this.autoPlay()
}
D.getStyle = function(obj,attr){
return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj,false)[attr];
}
/*
* @method bind
* 事件繫結函式
* bind events
*/
D.handler = function(){
var _th = this,i=0
if(this.btn){
this.prev.onclick = function(){
_th.turnLeft();
}
this.next.onclick = function(){
_th.turnRight();
}
}
if(this.focusBtn){
for(; i<this.pageList.length; i++){
this.pageList[i].key = i
this.pageList[i].function(){
_th.index = this.key + 1
_th.toggleClass()
}
}
}
this.wraper.onmouseover = function(){
clearInterval(_th.animation);
}
this.wraper.onmouseout = function(){
_th.auto && _th.autoPlay()
}
}
/*
* func turnRight
* 向右輪播函式
* @para 0
*/
D.turnRight = function(){
this.index++;
if(this.index == this.length-1){
this.index=1;
this.sliders.style.marginLeft = 0;
}
this.toggleClass();
}
/*
* func turnLeft
* 向左輪播函式
* @para 0
*/
D.turnLeft = function(){
this.index--;
if(this.index == 0){
this.index = this.length-2;
this.sliders.style.marginLeft = -this.width * (this.length-1) + "px";
}
this.toggleClass();
}
/*
* func toggleClass
* 改變數字焦點樣式,輪播動畫核心函式呼叫
* @para 0
*/
D.toggleClass = function(){
if(this.focusBtn){
this.pageList[this.activePage].className = "page";
this.pageList[this.index-1].className = "page page-active";
this.activePage = this.index-1;
}
this.slide(-this.index * this.width);
}
/*
* func slide
* 圖片滾動函式，核心函式
* @param ins 滾動終點
*/
D.slide = function(ins){
var _th = this
// 防止動畫過度過程中計算錯誤
if(_th.timer) clearInterval(_th.timer);
_th.timer = setInterval(move,_th.duration);
function move(){
var currentPosition = parseFloat(_th.sliders.style.marginLeft);
// 根據起始點和目標位置的比較確定向哪個方向移動
var n = ins-currentPosition<0?-1:1;
if(Math.abs(ins-currentPosition) < _th.step){
_th.sliders.style.marginLeft = ins + "px";
clearInterval(_th.timer);
}else{
// 變速運動關鍵，註釋變為勻速運動
if(_th.mode == 'easy-in-out')
_th.step = Math.abs(ins-currentPosition)/5
_th.sliders.style.marginLeft = currentPosition + n*_th.step + "px";
}
}
}
/*
* func autoPlay
* 自動輪播函式
* @para 0
*/
D.autoPlay = function(){
var _th = this
clearInterval(_th.animation)
_th.animation = setInterval(function(){
_th.turnRight();
},_th.delay)
}
/*
* func debounce
* 節流函式
* @para fn<要執行的函式> delay<節流時間>
* @value func
*/
D.debounce = function(fn,delay){
var timer = null
return function(){
if(timer){
clearTimeout(timer)
}
timer = setTimeout(fn,delay)
}
}
/*
* func refresh
* 自動重新整理函式，這裡採用節流是防止重新整理操作太過於頻繁導致效能下降
* @para 0
*/
D.refresh = function(){
var _th = this
this.debounce(function(){
_th.init()
_th.toggleClass()
},100)()
}
/*
* func rotation
* 例項化函式
* @para obj 例項化的具體引數
* @value 返回具體例項
*/
win.rotation = function(obj){
return new Rotation(obj)
}
})(document,window)呼叫方式
var r2 = rotation({
el: 'rotation-1',mode: 'easy-in-out',//運動曲線
auto: true,//開啟自動輪播
btn: true,//左右按鈕
focusBtn: false//焦點
})
window.onresize = function(){
r2 && r2.refresh()
}
精彩專題分享：jQuery圖片輪播 JavaScript圖片輪播 Bootstrap圖片輪播
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。