原生js無縫輪播插件怎么用

這篇文章給大家分享的是有關(guān)原生js無縫輪播插件怎么用的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。

建網(wǎng)站原本是網(wǎng)站策劃師、網(wǎng)絡(luò)程序員、網(wǎng)頁設(shè)計(jì)師等，應(yīng)用各種網(wǎng)絡(luò)程序開發(fā)技術(shù)和網(wǎng)頁設(shè)計(jì)技術(shù)配合操作的協(xié)同工作。創(chuàng)新互聯(lián)建站專業(yè)提供成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站,網(wǎng)頁設(shè)計(jì),網(wǎng)站制作(企業(yè)站、響應(yīng)式網(wǎng)站設(shè)計(jì)、電商門戶網(wǎng)站)等服務(wù),從網(wǎng)站深度策劃、搜索引擎友好度優(yōu)化到用戶體驗(yàn)的提升,我們力求做到極致!

效果

原生js無縫輪播插件怎么用

html結(jié)構(gòu)

<div class="sliders-wraper" id="rotation-1">
 <ul class="sliders clear">
 <li class="slider" >5</li>
 <li class="slider" >1</li>
 <li class="slider" >2</li>
 <li class="slider" >3</li>
 <li class="slider" >4</li>
 <li class="slider" >5</li>
 <li class="slider" >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;}

;(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()
}

感謝各位的閱讀！關(guān)于“原生js無縫輪播插件怎么用”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

新聞名稱：原生js無縫輪播插件怎么用
分享URL：http://muchs.cn/article38/jopepp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供小程序開發(fā)、企業(yè)建站、品牌網(wǎng)站制作、網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)、App開發(fā)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容