原生JS实现一个无缝轮播图插件(支持vue)

简介: 前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端。因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使用UI组件。在轮播图部分,本来在vue里面写了一下,但是发现总是出现bug,所以后来准备封装一个插件来实现。

轮播图插件(Broadcast.js)

前言:写这个插件的原因

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

功能&介绍

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

展示界面&使用

  • PC端展示:


202d5c12aa2e723e42cbd5f7270630b3e1881bc2

移动端展示:

d7e54eb1c4b5e9536f9cf09b0cfcaebb8fae4e9e

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>

在后面如果需要一个轮播图,则实列化这个对象:

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;

在需要使用轮播的组件中,引入我们的文件
38a22624635398f6f2db6b91bfaf1362d122302b
在模板文件中,采用自定义指令的方式,来插入我们的轮播图

<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还未发现,如果发现问题,欢迎留言指出,敬请斧正。谢谢!!



原文发布时间为:2018年06月19日
原文作者:LiChangyi

本文来源: 掘金 如需转载请联系原作者

相关文章
|
1月前
|
JavaScript 前端开发 持续交付
【专栏】Vue.js和Node.js如何结合构建现代Web应用
【4月更文挑战第27天】本文探讨了Vue.js和Node.js如何结合构建现代Web应用。Vue.js作为轻量级前端框架,以其简洁易懂、组件化开发、双向数据绑定和虚拟DOM等特点受到青睐;而Node.js是高性能后端平台,具备事件驱动、非阻塞I/O、丰富生态系统和跨平台优势。两者结合实现前后端分离,高效通信,并支持热更新、持续集成、跨平台和多端适配,为开发高性能、易维护的Web应用提供强有力的支持。
|
1天前
|
JavaScript 前端开发 搜索推荐
JS经典案例-无缝滚动轮播图(纯JS)
JS经典案例-无缝滚动轮播图(纯JS)
8 0
|
5天前
vue.js+node.js+mysql在线聊天室源码
vue.js+node.js+mysql在线聊天室源码 技术栈:vue.js+Element UI+node.js+socket.io+mysql
17 3
|
12天前
|
缓存 JavaScript 前端开发
Nuxt.js实战:Vue.js的服务器端渲染框架
Nuxt.js提供了开发、构建和部署的完整工作流。使用nuxt命令启动开发服务器,nuxt build进行生产构建,nuxt start启动生产服务器
17 0
|
15天前
|
JavaScript 开发者 前端开发
浅谈Vue.js与原生开发
Vue.js 是一款流行的前端框架,以其独特的模板语法简化了动态视图创建,通过指令和表达式便捷处理数据。与原生开发相比,Vue.js 提供了Vue Router进行高效路由管理,Vuex进行状态集中管理,以及丰富的生态系统和工具链如Vue CLI。Vue组件化开发、响应式数据绑定和单文件组件提高了代码复用和可维护性,但原生开发在性能和直接操作DOM方面可能更具优势。
|
19天前
|
资源调度 JavaScript UED
vue路由的基础知识总结,vueRouter插件的安装与使用
vue路由的基础知识总结,vueRouter插件的安装与使用
|
21天前
|
JavaScript Java 测试技术
基于vue和微信小程序的校园自助打印系统+springboot+vue.js附带文章和源代码设计说明文档ppt
基于vue和微信小程序的校园自助打印系统+springboot+vue.js附带文章和源代码设计说明文档ppt
35 7
|
21天前
|
存储 JavaScript 前端开发
笔.COOL,一个功能完备、使用便捷的在线HTML/CSS/JS以及Vue编辑器和作品分享平台
笔.COOL是一个新兴的在线 HTML/CSS/JS 及 Vue 编辑器,提供实时预览和云端存储功能。用户可以随时随地编写和保存代码,同时分享作品给他人预览和学习。它也是一个实用的 BUG 复现工具,支持嵌入编辑器到博客,促进代码交流。社区活跃,适合开发者展示作品、获取灵感和学习。
|
1月前
|
Web App开发 JavaScript 前端开发
解决Vue.js Devtools未检测到Vue实例的问题
解决Vue.js Devtools未检测到Vue实例的问题
|
1月前
|
数据可视化 JavaScript 定位技术
Cesium第1篇,CesiumJS第1篇,CesiumJS使用详细,在vue中使用Cesium.js(WebGIS中的Cesium地图可视化应用)
Cesium是一种基于WebGL开源的虚拟地球技术,可以用于构建高性能、跨平台的三维地球应用程序,它支持多种数据格式和地图服务,可以实现地球表面的高精度渲染、地形分析、数据可视化等功能。Cesium还提供了丰富的API和插件,方便开发者进行二次开发和定制化,且可免费商用,在航空航天、国防、城市规划、教育等领域得到了广泛应用。
80 0
Cesium第1篇,CesiumJS第1篇,CesiumJS使用详细,在vue中使用Cesium.js(WebGIS中的Cesium地图可视化应用)