Broadcast graph plug-in (broadcast.js)

Preamble: The reason for writing this plug-in

  • Some time ago, WE planned to use VUE and NodeJS interface of netease Cloud to simulate netease cloud music mobile terminal. I didn’t use a UI component because I wanted to write all the code myself and reinforce my Flex layout. In the part of the rotation diagram, I originally wrote it in Vue, but found that there were always bugs, so I prepared to package a plug-in to achieve it.
  • The second reason is that I thought I had been using VUE this semester and found that I had forgotten the original JS I had learned before, so I wanted to take this opportunity to review JS again.

Features & Introduction

  • No reference to a third-party plugin library, native JS, wrapped a Broadcast object, expanded on this object, just 190 + lines of code.
  • At present, it mainly realizes: seamless rotation, automatic playback, switch between left and right buttons on PC side and gesture sliding switch on mobile side.
  • You have written some basic CSS styles and can modify them to your own preference.

Display interface & use

  • Github address: git repository address
  • Demo: Browse the address online

  • PC display:

    ​

  • Mobile terminal display:

    ​

Usage

Plain page reference

  1. Copy the broadcast-me. Js file from the SRC /js file in the Github repository to your own project file

  2. Copy the broadcast-me. CSS file from the SRC/CSS file in the Github repository to your own project file

  3. Introduce:

    
        
<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>
  <! Add CSS files to the plugin -->
  <link rel="stylesheet" href="./css/broadcast-me.css">
</head>
<body>
  <! -- Import plugin js file -->
  <script src="./js/broadcast-me.js"></script>
</body>
</html>
Copy the code

  4. Later, if a rotation graph is needed, the object is instantiated:

    var box = document.getElementById('box');
var imagesAndUrl = [{
  imgSrc : './img/1.jpg'.linkHref : "#"}, {imgSrc : './img/2.jpg'.linkHref : '1'}, {imgSrc : './img/3.jpg'.linkHref : The '#'}, {imgSrc : './img/4.jpg'.linkHref : The '#'}, {imgSrc : './img/5.jpg'.linkHref : The '#'
}];
// box => You need to create the parent element of the wheel map
// imagesAndUrl => array, store image address and image link address
var broadcast = new Broadcast(box,imagesAndUrl,{
      transitionTime : 800.// Animation transition time, default is 800ms
      intervalTime : 5000 // Image switching time, 5s by default
 });
Copy the code

VUE referenced in the

  1. Used in VUE, inbroadcast-me.jsThe document ends with:
// Expose Broadcas objects to the outside world
module.exports = Broadcast;
Copy the code

  1. Import our files in components that need to use multicast

  2. In the template file, the use of custom instructions to insert our wheel map

<template> <div class="broadcast" v-broadcast="broadcastImg"> <! </div> </template> imgSrc: './img/5.jpg', linkHref: '#'}Copy the code
  1. Add a custom directive:
directives:{
  broadcast: {inserted:function(el,binding) {
      // binding.value is the parameter we passed in, the address of the image and the image click link
      var broadcast = new Broadcast(el,binding.value,{
        transitionTime : 800.// Animation transition time, default is 800ms
        intervalTime : 5000 // Image switching time, 5s by default}); }}}Copy the code

API

// Construct the object
new Broadcast (el,imagesAndUrl,JSON)
Copy the code
attribute instructions Note note
el You need to create the wrap (parent) element of the wheel map Don’t write error
imagesAndUrl The address of the picture is linked to the address of the picture. Array object linkHref => image click link; ImgSrc => Image address Don’t write error
JSON TransitionTime => animation transitionTime, intervalTime => animation switch time Default: transition time => 800ms switchover time => 5s

Code writing ideas

Dynamic generation of DOM nodes
  1. Using the width of el, generate a dynamic CSS to add to the page
// Add some CSS styles dynamically
let cssStr = `.broadcastMe .broadcastMe-list {width: The ${(this.imagesAndUrl.length+2) *this.el.clientWidth}px; }.broadcastMe .broadcastMe-list .broadcastMe-item {width:The ${this.el.clientWidth}px; } `;

let styleNode = document.createElement('style');
styleNode.innerText = cssStr;
document.head.appendChild(styleNode)
Copy the code
  1. Through the form of string template, generate the HTML string that we need and conform to seamless rotation, and load it into the EL node.
Gesture swiping on the mobile side

Complete a sliding process by: touchStart => touchmove => touchend, change the current left value in the Touchmove event, and judge the distance between the left and right edges in the Touchend event to turn the page or not.

// Move the finger to slide
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;
  // Determine how far the scrolling image is from the left and right images,
  this.index = Math.round(-left/this.el.clientWidth);
  this.animationMark = false;
  this.render();
})
Copy the code
Render function (☆)
Broadcast.prototype.render = function () {
  // Anti-shake control
  if(this.animationMark) return;

  this.animationMark = true;
  // Change the left value of broadcastMeList
  this.broadcastMeList.style.left = (- 1) *this.el.clientWidth*this.index + 'px';
  this.broadcastMeList.style.transition = 'left ' + this.timer/1000 + 's';

  setTimeout((a)= > {
    // Add judgment to prevent out of bounds
    if(this.index <= 0) {// Seamless rotation, change the real left value, cancel transition, cause visual error
      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();
}
Copy the code

The last

Because of the lack of talent, code has just been written, less testing, many bugs have not been found, if found problems, welcome to leave a message pointed out, please be corrected. Thank you very much!!