轮播图插件(Broadcast.js)

前言：写这个插件的原因

  • 前段时间准备用vue加上网易云的nodejs接口，模拟网易云音乐移动端。因为想自己写一遍所有的代码以及加固自己的flex布局，所以没有使用UI组件。在轮播图部分，本来在vue里面写了一下，但是发现总是出现bug,所以后来准备封装一个插件来实现。
  • 其次的一个原因是，以为这一学期学vue一直在用vue，发现自己以前学的原生js有点遗忘，所以想借这个机会再次复习一下js。

功能&介绍

  • 没有引用第三方插件库，原生js，封装一个Broadcast对象，在此对象上展开，仅仅190多行代码。
  • 目前主要实现了:无缝轮播，自动播放，PC端左右按钮点击切换，移动端手势滑动切换。
  • 自己写了一部分基础的css样式，可以再次的基础上修改成自己喜欢的样式。

展示界面&使用

Usage

普通页面引用

  1. 复制github仓库下面，src/js 文件下的 broadcast-me.js 放到自己项目文件中
  2. 复制github仓库下面，src/css 文件下的 broadcast-me.css 放到自己项目文件中

  3. 在页面中引入:

    <!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>

  4. 在后面如果需要一个轮播图，则实列化这个对象：

    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中引用

  1. 在vue中使用，在broadcast-me.js 文件最后加上：
// 向外界暴露Broadcas对象

module.exports = Broadcast;
  1. 在需要使用轮播的组件中，引入我们的文件

  1. 在模板文件中，采用自定义指令的方式，来插入我们的轮播图
<template>

  <div class="broadcast" v-broadcast="broadcastImg">

     <!-- 自定义指令broadcast，，形参 => broadcastImg 为我们的轮播图数据 -->

  </div>

</template> imgSrc : './img/5.jpg',

  linkHref : '#'

}
  1. 添加自定义指令：
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 节点的动态生成
  1. 通过 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)
  1. 通过字符串模板的形式，生成我们需要的且符合无缝轮播的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还未发现，如果发现问题，欢迎留言指出，敬请斧正。谢谢！！

原生js写一个无缝轮播图插件(支持vue)的更多相关文章

  1. 原生js实现响应式轮播图，支持电脑端点击切图，手机端滑动切图

    轮播图的实现原理并不难,但是步骤有些繁琐.最近练习了一个轮播图,大部分是跟着网上的教程写的,然后自己做了一点兼容ie8的修改,加了点击切换图片的特效和手机端的滑动特效,让这个轮播图可以在响应式的网站中 ...

  2. 原生JS面向对象思想封装轮播图组件

    原生JS面向对象思想封装轮播图组件 在前端页面开发过程中,页面中的轮播图特效很常见,因此我就想封装一个自己的原生JS的轮播图组件.有了这个需求就开始着手准备了,代码当然是以简洁为目标,轮播图的各个功能 ...

  3. JQ无缝轮播图-插件封装

    类似京东的这种无缝轮播效果: 实例代码下载 HTML代码: <body> <!-- /*觅me 探索生活*/ --> <div class="test" ...

  4. 原生JS实现移动端轮播图

    功能描述: 自动无缝轮播图片,底部小圆点跟图片保持一致:手指左右移动轮播图,移动距离大于50px播放下一张(或上一张),小于50px则回弹 具体功能实现: 1.定时器 自动轮播图片 先声明一个inde ...

  5. js写的简单轮播图

    这个轮播图代码是从网上找来的,专门找了个写法简单的,只是作为一个小练习,大概原理如下: 1.首先是图片切换2.自动播放3.调用自动播放4.移动到容器上边停止播放,离开自动播放5.移动到导航上停止播放, ...

  6. 原生js的懒人轮播图

    <style> body{ margin: 0; padding: 0px;}#carousel{ margin: auto; /* 居中 */ width: 600px; /* 设置宽度 ...

  7. jQuery插件slides实现无缝轮播图特效

    初始化插件: slides是一款基于jQuery无缝轮播图插件,支持图内元素动画,可以自定义动画类型 1 2 3 4 5 6 7 8 9 10 $(".slideInner").s ...

  8. 封装一个简单的原生js焦点轮播图插件

    轮播图实现的效果为,鼠标移入左右箭头会出现,可以点击切换图片,下面的小圆点会跟随,可以循环播放(为了方便理解,没有补2张图做无缝轮播).本篇文章的主要目的是分享封装插件的思路. 轮播图我一开始是写成非 ...

  9. 原生JavaScript（js）手把手教你写轮播图插件（banner）

    ---恢复内容开始--- 1.轮播图插件 1.什么是插件: 为已有的程序增加功能 2.插件的特点(为什么要做成一个插件)与注意事项: 1.通用性,可移植性强 2.兼容性:不会对其他代码产生影响 3.创 ...

随机推荐

  1. 26）PHP，数据库表格中项的数据类型

    类型展示: tinyint-----1个字节 smallint----2个字节 mediumint--3个字节 int------4个字节 bigint---8个字节 字符串类型 最基本最重要的2个: ...

  2. 隐马尔可夫随机场HMM

    概率知识点: 0=<P(A)<=1 P(True)=1;P(False)=0 P(A)+P(B)-P(A and B) = P(A or B) P(A|B)=P(A,B)/P(B) =&g ...

  3. 关于Java集合框架总结

    Java集合专门用来存放多个对象,方便程序处理数据.Java提供了多种集合类,以便满足不同的应用需求,这些集合类分为两大系列:Collection和Map List List的通用方法 boolean ...

  4. gpio 的配置

    1.时钟使能 B引脚RCC时钟脉冲启动.|(或)表示只要第三个为1就行. 也可以写为RCC_APB2ENR  | = 0X0008; 2.配置GPIO的输出模式以及速度 3 . 如果是 0号引脚:GP ...

  5. JAVA专业术语面试100问

    前言:面试技巧另外开篇再说,先上面试干货吧.Redis.消息队列.SQL不要走开,关注后更精彩! 1.面向对象的特点有哪些? 抽象.继承.封装.多态. 2.接口和抽象类有什么联系和区别? 3.重载和重 ...

  6. java5的静态导入import static

    在Java 5中,import语句得到了增强,以便提供甚至更加强大的减少击键次数功能,虽然一些人争议说这是以可读性为代价的.这种新的特性成为静态导入. 1.静态导入的与普通import的区别: imp ...

  7. 3dmax2019卸载/安装失败/如何彻底卸载清除干净3dmax2019注册表和文件的方法

    3dmax2019提示安装未完成,某些产品无法安装该怎样解决呢?一些朋友在win7或者win10系统下安装3dmax2019失败提示3dmax2019安装未完成,某些产品无法安装,也有时候想重新安装3 ...

  8. ospf实验二

    R1,R2,R3为17.1.1.0网段 1. R4先做rip #rip 1 #version 2 #undo sum.. #netwokr 14.0.0.0 实验第四条 标记tag 100 在R4上做 ...

  9. [LC] 674. Longest Continuous Increasing Subsequence

    Given an unsorted array of integers, find the length of longest continuous increasing subsequence (s ...

  10. js - 常用的继承

    零.序言 参考资料:JavaScript常用八种继承方案: 注:1.此篇笔记是站在上述资料的肩膀上的一篇小结: 2.阅读之前建议温习一下 js 中的 prototype 和 constructor:( ...