輪播圖插件(Broadcast.js)

前言：寫這個插件的原因

前段時間準備用vue加上網易云的nodejs接口，模擬網易云音樂移動端。因為想自己寫一遍所有的代碼以及加固自己的flex布局，所以沒有使用UI組件。在輪播圖部分，本來在vue里面寫了一下，但是發現總是出現bug,所以后來準備封裝一個插件來實現。

其次的一個原因是，以為這一學期學vue一直在用vue，發現自己以前學的原生js有點遺忘，所以想借這個機會再次復習一下js。

功能&介紹

沒有引用第三方插件庫，原生js，封裝一個Broadcast對象，在此對象上展開，僅僅190多行代碼。

目前主要實現了:無縫輪播，自動播放，PC端左右按鈕點擊切換，移動端手勢滑動切換。

自己寫了一部分基礎的css樣式，可以再次的基礎上修改成自己喜歡的樣式。

展示界面&使用

github地址： git倉庫地址

演示demo： 在線瀏覽地址

PC端展示：

?

移動端展示：

?

Usage

普通頁面引用

復制github倉庫下面，src/js文件下的 broadcast-me.js 放到自己項目文件中

復制github倉庫下面，src/css 文件下的 broadcast-me.css 放到自己項目文件中

在頁面中引入:

Document

在后面如果需要一個輪播圖，則實列化這個對象：

var box = document.getElementById('box');

var imagesAndUrl = [{

imgSrc : './img/1.jpg',

linkHref : "#"

},{

imgSrc : './img/2.jpg',

linkHref : '1'

},{

imgSrc : './img/3.jpg',

linkHref : '#'

},{

imgSrc : './img/4.jpg',

linkHref : '#'

},{

imgSrc : './img/5.jpg',

linkHref : '#'

}];

// box => 你需要創建輪播圖的父級元素

// imagesAndUrl => 數組，存放圖片地址以及圖片的連接地址

var broadcast = new Broadcast(box,imagesAndUrl,{

transitionTime : 800, // 動畫過渡時間，默認為800ms

intervalTime : 5000 // 圖片切換時間，默認為5s

});

VUE中引用

在vue中使用，在broadcast-me.js 文件最后加上：

// 向外界暴露Broadcas對象

module.exports = Broadcast;

在需要使用輪播的組件中，引入我們的文件

在模板文件中，采用自定義指令的方式，來插入我們的輪播圖

imgSrc : './img/5.jpg',

linkHref : '#'

}

添加自定義指令：

directives:{

broadcast:{

inserted:function(el,binding) {

// binding.value 為我們傳入的形參，即圖片的地址和圖片點擊鏈接

var broadcast = new Broadcast(el,binding.value,{

transitionTime : 800, // 動畫過渡時間，默認為800ms

intervalTime : 5000 // 圖片切換時間，默認為5s

});

}

}

}

API

// 構造的對象

new Broadcast (el,imagesAndUrl,JSON)

屬性

說明

備注備注

el

你需要創建輪播圖的包裹(父級)元素

不寫報錯

imagesAndUrl

圖片的地址與圖片地址鏈接。數組對象 linkHref => 圖片點擊鏈接；imgSrc => 圖片地址

不寫報錯

JSON

transitionTime => 動畫過渡時間， intervalTime => 動畫切換時間

默認:過渡時間 => 800ms 切換時間 => 5s

代碼編寫思路

dom 節點的動態生成

通過 el 的寬度，生成一個動態css加入到頁面當中

// 動態添加一些css樣式

let cssStr = `.broadcastMe .broadcastMe-list {width: ${(this.imagesAndUrl.length+2)*this.el.clientWidth}px;}.broadcastMe .broadcastMe-list .broadcastMe-item {width:${this.el.clientWidth}px;}`;

let styleNode = document.createElement('style');

styleNode.innerText = cssStr;

document.head.appendChild(styleNode)

通過字符串模板的形式，生成我們需要的且符合無縫輪播的html字符串，加載el節點當中。

移動端手勢滑動

通過：touchstart => touchmove => touchend 完成一個滑動的全過程，并在touchmove事件當中，改變當前的left值，并在touchend事件當中判斷左右2邊的距離，進行翻頁還是不變。

// 移動端手指滑動

let stratPointX = 0;

let offsetX = 0;

this.el.addEventListener("touchstart", (e) => {

stratPointX = e.changedTouches[0].pageX;

offsetX = this.broadcastMeList.offsetLeft;

this.animationMark = true;

})

this.el.addEventListener("touchmove", (e) => {

let disX = e.changedTouches[0].pageX - stratPointX;

let left = offsetX + disX;

this.broadcastMeList.style.transitionProperty = 'none';

this.broadcastMeList.style.left = left + 'px';

})

this.el.addEventListener("touchend", () => {

let left = this.broadcastMeList.offsetLeft;

// 判斷正在滾動的圖片距離左右圖片的遠近，

this.index = Math.round(-left/this.el.clientWidth);

this.animationMark = false;

this.render();

})

渲染函數(☆)

Broadcast.prototype.render = function () {

// 防抖控制

if(this.animationMark) return;

this.animationMark = true;

// 修改broadcastMeList 的left值

this.broadcastMeList.style.left = (-1)*this.el.clientWidth*this.index + 'px';

this.broadcastMeList.style.transition = 'left ' + this.timer/1000 + 's';

setTimeout(() => {

// 添加判斷，防止出界

if(this.index <= 0){

// 無縫輪播，修改真實的left值，取消transition，造成視覺錯誤

this.broadcastMeList.style.transitionProperty = 'none';

this.index = this.imagesAndUrl.length;

this.broadcastMeList.style.left = (-1)*this.el.clientWidth*this.index + 'px';

}else if (this.index > this.imagesAndUrl.length){

this.broadcastMeList.style.transitionProperty = 'none';

this.index = 1;

this.broadcastMeList.style.left = (-1)*this.el.clientWidth*this.index + 'px';

}

this.animationMark = false;

},this.timer)

this.renderSpot();

}

最后

因為才疏學淺，代碼才剛剛寫完，測試較少，很多bug還未發現，如果發現問題，歡迎留言指出，敬請斧正。謝謝！！

總結

以上是生活随笔為你收集整理的vue如何使用原生js写动画效果_原生js写一个无缝轮播图插件(支持vue)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。