Carousel Figure plugin (Broadcast.js)
Introduction: The reason to write this plugin
- Prepared earlier by adding YORK vue cloud nodejs interface, analog Netease cloud music movement end. Because I wanted to write all the code again and reinforcing their flex layout, so there is no use UI components. In view of a portion carousel, originally I wrote about in vue inside, but found always appear bug, so then prepare a package plug-ins to achieve.
- One reason Second is that this semester has been in use vue vue, I found that native js own've learned a little bit forgotten, so would like to take this opportunity to once again review the js.
Features
- No reference to third-party plug-in library, native js, a Broadcast package object, expand on this object, just over 190 lines of code.
- At present the main achievement: seamless carousel, auto-play, click on the toggle button about the PC side, the mobile terminal gesture slide switch.
- I wrote a part of the base of the css styles can be modified on the basis again into your favorite style.
Display Interface & Use
- Address github: git repository address
- Demo demo: online browsing address
- PC side show:
- Mobile terminal display:
Usage
Ordinary page references
- Copy the following github repository,
src/jsunder the filebroadcast-me.jsinto their own project file - Copy the following github repository,
src/cssunder the filebroadcast-me.cssinto their own project file -
Introduced in the page:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <!-- 引入插件的css文件 --> <link rel="stylesheet" href="./css/broadcast-me.css"> </head> <body> <!-- 引入插件的js文件 --> <script src="./js/broadcast-me.js"></script> </body> </html> -
If a need later FIG rotation, this object is a solid column:
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 cited
- In vue, the
broadcast-me.jsend of the file add:
// 向外界暴露Broadcas对象
module.exports = Broadcast;- In the carousel assembly requires the use of, the introduction of our files
- In the template file, using custom commands way to insert our Carousel Figure
<template>
<div class="broadcast" v-broadcast="broadcastImg">
<!-- 自定义指令broadcast，，形参 => broadcastImg 为我们的轮播图数据 -->
</div>
</template> imgSrc : './img/5.jpg',
linkHref : '#'
}- Add custom instructions:
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)| Attributes | Explanation | Notes Notes |
|---|---|---|
| he | You need to create a map of the parcel carousel (parent) element | Do not write error |
| imagesAndUrl | Address address link with the picture of the picture. An array of objects linkHref => picture click on the link; imgSrc => Picture Address | Do not write error |
| JSON | transitionTime => animated transition time, intervalTime => Animation switching time | Default: transition time => 800ms switching time => 5s |
Coding ideas
Dynamically generating a node dom
- El to the width, is added to generate a dynamic page which 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)- By a string template, we need to generate html strings seamless and consistent with carousel, el loads among nodes.
Slidably moving end gesture
By: touchstart => touchmove => touchend complete the whole process of a slide, and touchmove incident, change the current value of the left, and from about 2 side determines in touchend incident, or for the same page.
// 移动端手指滑动
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();
})Rendering function (☆)
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();
}At last
Because Caishuxueqian, has just finished writing the code, less testing, many bug has not been found, if problems are detected, welcome message pointed out that, please treatise. Thank you! !