原生js無縫輪播插件使用詳解
更新時(shí)間：2020年03月09日 14:25:56 作者：暴暴君
這篇文章主要為大家詳細(xì)介紹了原生js無縫輪播插件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
這篇博文主要講如何使用原生js來實(shí)現(xiàn)一個(gè)兼容 IE9+ 的無縫輪播圖。主要知識點(diǎn)如下：
- 面向?qū)ο?/li>
- js優(yōu)化之節(jié)流函數(shù)
- js運(yùn)動(dòng)
效果
html結(jié)構(gòu)
<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 //當(dāng)前顯示的圖片的索引
this.timer = null //單張圖片運(yùn)動(dòng)定時(shí)器
this.animation = null //自動(dòng)輪播定時(shí)器
// 在obj中可以自定義的參數(shù)
this.mode = 'easy-in-out'//動(dòng)畫曲線，可選 'linear'
this.step = 5 //勻速運(yùn)動(dòng)滾動(dòng)步長
this.delay = 2500 //輪播間隔
this.duration = 40 //單張圖片動(dòng)畫時(shí)長
this.auto = true //是否開啟自動(dòng)輪播
this.btn = false //是否有左右按鈕
this.focusBtn = true //是否支持焦點(diǎn)事件
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 //當(dāng)前的焦點(diǎn)的索引
}
this.init()
}
var D = Rotation.prototype
/*
* func init
* 初始化函數(shù)
* @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
* 事件綁定函數(shù)
* 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
* 向右輪播函數(shù)
* @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
* 向左輪播函數(shù)
* @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
* 改變數(shù)字焦點(diǎn)樣式,輪播動(dòng)畫核心函數(shù)調(diào)用
* @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
* 圖片滾動(dòng)函數(shù)，核心函數(shù)
* @param ins 滾動(dòng)終點(diǎn)
*/
D.slide = function(ins){
var _th = this
// 防止動(dòng)畫過度過程中計(jì)算錯(cuò)誤
if(_th.timer) clearInterval(_th.timer);
_th.timer = setInterval(move,_th.duration);
function move(){
var currentPosition = parseFloat(_th.sliders.style.marginLeft);
// 根據(jù)起始點(diǎn)和目標(biāo)位置的比較確定向哪個(gè)方向移動(dòng)
var n = ins-currentPosition<0?-1:1;
if(Math.abs(ins-currentPosition) < _th.step){
_th.sliders.style.marginLeft = ins + "px";
clearInterval(_th.timer);
}else{
// 變速運(yùn)動(dòng)關(guān)鍵，注釋變?yōu)閯蛩龠\(yùn)動(dòng)
if(_th.mode == 'easy-in-out')
_th.step = Math.abs(ins-currentPosition)/5
_th.sliders.style.marginLeft = currentPosition + n*_th.step + "px";
}
}
}
/*
* func autoPlay
* 自動(dòng)輪播函數(shù)
* @para 0
*/
D.autoPlay = function(){
var _th = this
clearInterval(_th.animation)
_th.animation = setInterval(function(){
_th.turnRight();
},_th.delay)
}
/*
* func debounce
* 節(jié)流函數(shù)
* @para fn<要執(zhí)行的函數(shù)> delay<節(jié)流時(shí)間>
* @value func
*/
D.debounce = function(fn,delay){
var timer = null
return function(){
if(timer){
clearTimeout(timer)
}
timer = setTimeout(fn,delay)
}
}
/*
* func refresh
* 自動(dòng)刷新函數(shù)，這里采用節(jié)流是防止刷新操作太過于頻繁導(dǎo)致性能下降
* @para 0
*/
D.refresh = function(){
var _th = this
this.debounce(function(){
_th.init()
_th.toggleClass()
},100)()
}
/*
* func rotation
* 實(shí)例化函數(shù)
* @para obj 實(shí)例化的具體參數(shù)
* @value 返回具體實(shí)例
*/
win.rotation = function(obj){
return new Rotation(obj)
}
})(document, window)
調(diào)用方式
var r2 = rotation({
el: 'rotation-1',
mode: 'easy-in-out', //運(yùn)動(dòng)曲線
auto: true,//開啟自動(dòng)輪播
btn: true, //左右按鈕
focusBtn: false//焦點(diǎn)
})
window.onresize = function(){
r2 && r2.refresh()
}
精彩專題分享：jQuery圖片輪播 JavaScript圖片輪播 Bootstrap圖片輪播
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了javascript判斷復(fù)選框是否選中的方法，需要的朋友可以參考下2015-10-10
javascript實(shí)現(xiàn)checkbox全選的代碼
本文給大家分享的是js實(shí)現(xiàn)checkbox的全選的代碼,在網(wǎng)頁制作中很常用的js代碼,供大家學(xué)習(xí)參考。2015-04-04
javascript實(shí)現(xiàn)仿百度圖片的瀑布流加載效果
這是一款仿照百度圖片的瀑布流效果，可以無限加載,兼容各大主流瀏覽器，這里分享給大家，希望小伙伴們能夠喜歡2016-04-04
javaScript讓文本框內(nèi)的最后一個(gè)文字的后面獲得焦點(diǎn)實(shí)現(xiàn)代碼
讓文本框內(nèi)的最后一個(gè)文字的后面獲得焦點(diǎn)，在應(yīng)用中很常見，接下來提供解決方案，按興趣的朋友可以了解下2013-01-01
JavaScript獲取服務(wù)器時(shí)間的方法詳解
這篇文章主要介紹了JavaScript獲取服務(wù)器時(shí)間的方法,結(jié)合實(shí)例形式詳細(xì)分析了javascript基于ajax獲取服務(wù)器時(shí)間的相關(guān)操作技巧,需要的朋友可以參考下2016-12-12
Nuxt默認(rèn)模板、默認(rèn)布局和自定義錯(cuò)誤頁面的實(shí)現(xiàn)
這篇文章主要介紹了Nuxt默認(rèn)模板、默認(rèn)布局和自定義錯(cuò)誤頁面的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
下面小編就為大家?guī)硪黄獪\談webpack下的AOP式無侵入注入。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-11-11
bootstrap使用validate實(shí)現(xiàn)簡單校驗(yàn)功能
這篇文章主要為大家詳細(xì)介紹了bootstrap使用validate實(shí)現(xiàn)簡單校驗(yàn)功能,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
本文主要分享了制作幻燈片的實(shí)例代碼，具有一定的參考價(jià)值，下面跟著小編一起來看下吧2017-01-01
javascript動(dòng)畫對象支持加速、減速、緩入、緩出的實(shí)現(xiàn)代碼
javascript動(dòng)畫對象支持加速、減速、緩入、緩出的實(shí)現(xiàn)代碼，需要的朋友可以參考下2012-09-09