原生JS实现一个无缝轮播图插件(支持vue)
轮播图插件(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
放到自己项目文件中在页面中引入:
<!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, // 动画过渡时间,默认为800msintervalTime : 5000 // 图片切换时间,默认为5s}); 复制代码
VUE中引用
- 在vue中使用,在
broadcast-me.js
文件最后加上:
// 向外界暴露Broadcas对象
module.exports = Broadcast;
复制代码
在需要使用轮播的组件中,引入我们的文件
在模板文件中,采用自定义指令的方式,来插入我们的轮播图
<template><div class="broadcast" v-broadcast="broadcastImg"><!-- 自定义指令broadcast,,形参 => broadcastImg 为我们的轮播图数据 --></div>
</template> imgSrc : './img/5.jpg',linkHref : '#'
}
复制代码
- 添加自定义指令:
directives:{broadcast:{inserted:function(el,binding) {// binding.value 为我们传入的形参,即图片的地址和图片点击链接var broadcast = new Broadcast(el,binding.value,{transitionTime : 800, // 动画过渡时间,默认为800msintervalTime : 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还未发现,如果发现问题,欢迎留言指出,敬请斧正。谢谢!!
原生JS实现一个无缝轮播图插件(支持vue)相关推荐
- vue如何使用原生js写动画效果_原生js写一个无缝轮播图插件(支持vue)
轮播图插件(Broadcast.js) 前言:写这个插件的原因 前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...
- html怎么引轮播图插件,原生js写一个无缝轮播图插件(支持vue)
轮播图插件(Broadcast.js) 前言:写这个插件的原因 前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...
- 原生JS实现韩雪冬轮播图
分享一个用原生JS实现的韩雪冬轮播图,效果如下: 实现代码如下: <!DOCTYPE html> <html><head lang="en">& ...
- 2021年原生JS实现韩雪冬轮播图
<!DOCTYPE html> <html><head lang="en"><meta charset="UTF-8" ...
- 左右无缝轮播html,JS实现左右无缝轮播图代码
废话不多说了,直接给大家贴代码了. 无缝轮播图: 无缝轮播图 *{margin: 0;padding:0; } ul{list-style: none;} .banner{width: 600px;h ...
- 纯js封装一个无缝轮播
下面的代码用纯js封装一个轮播组件.功能如下: 可上滑.下滑.左滑.右滑.无缝轮播. 移动端支持手势滑动. 可指定第一个显示的轮播图. 支持放置文字.图片和视频.带导航器. 导航器可自定义样式.若不想 ...
- 【原生js】详解轮播图之无缝滚动
前言:轮播图,是网站首页中最常见的一种图片切换特效,作为前端开发者,我相信很多开发者都直接调用了JQuery中的封装好的方法实现图片轮播,省事简单.所以我今天想介绍一下原生js代码实现的图片轮播. 结 ...
- js实现左右无缝轮播图
今天让我们再来做一个左右无缝的轮播图吧! 一.准备html代码 html代码也叫结构 <!DOCTYPE html> <html lang="zh-CN"> ...
- 原生js实现触摸滚动轮播图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- html5图片无限循环播放,原生js实现无限循环轮播图效果
知识要点 1.实现无限循环的原理: 以偏移的距离来判断是否跳回第一张和最后一张 也可以利用循环判断图片的当前索引值 var newLeft=parseInt(list.style.left)+offs ...
最新文章
- Pycharm初始创建项目和环境搭建(解决aconda库文件引入不全等问题)
- Java性能优化推荐书!RocketMQ消息丢失场景及解决办法
- 汇编语言的准备知识--给初次接触汇编者 (1-4) 转载
- Android Framework增加API 报错 Missing nullability on parameter
- SQLServer中批量插入数据方式的性能对比 (转)
- Sliverlight MD5
- 三言五载道不尽【追梦五年】
- 与Flutter第一次亲密接触-Android 视角
- 过滤掉文本中的javascript标签代码
- 计算机加域后数据库无法登录,客户端多台计算机登录域失败,显示如下
- 详解Haar特征与AdaBoost方法原理
- Oracle 索引层级,十六、oracle 索引
- 屏幕大师4k屏幕测试软件,如何检测电视屏幕真伪4K、坏点漏光?两款工具一键辨别!...
- SecureCRT 中文(附上1.解决SecureCRT乱码问题2.解决Hostname lookup failed: host not found问题)
- 简单图形的输入输出练习
- 最新消息:愚人节快乐!
- selenium 定位一组元素
- Win10恢复照片查看器
- SpringBoot 项目中在Controller 直接调用Mapper,提示:Field mapper in ‘*Controller ‘ required a bean of type ‘*Map
- 海康威视IPCamera图像捕获 二种方法
热门文章
- @scheduled注解配置时间_《SpringBoot整合redis、Scheduled/quartz定时任务》
- 推荐一个专业的正则表达试学习网站
- python dataframe取行列_pandas DataFrame 行列索引及值的获取的方法
- 【C++】常用集合算法
- Web Resources on Patten Recognition
- 洛谷P3709 大爷的字符串题(莫队)
- oracle创建用户和表空间,授权,oracle用imp导入dmp文件
- Win10 镜像安装到新固态硬盘两法
- esxi update patch
- Python中os.listdir和os.walk的区别