原生js写一个无缝轮播图插件(支持vue)
轮播图插件(Broadcast.js)
前言:写这个插件的原因
- 前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端。因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使用UI组件。在轮播图部分,本来在vue里面写了一下,但是发现总是出现bug,所以后来准备封装一个插件来实现。
- 其次的一个原因是,以为这一学期学vue一直在用vue,发现自己以前学的原生js有点遗忘,所以想借这个机会再次复习一下js。
功能&介绍
- 没有引用第三方插件库,原生js,封装一个Broadcast对象,在此对象上展开,仅仅190多行代码。
- 目前主要实现了:无缝轮播,自动播放,PC端左右按钮点击切换,移动端手势滑动切换。
- 自己写了一部分基础的css样式,可以再次的基础上修改成自己喜欢的样式。
展示界面&使用
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, // 动画过渡时间,默认为800ms
intervalTime : 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, // 动画过渡时间,默认为800ms
intervalTime : 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)的更多相关文章
- 原生js实现响应式轮播图,支持电脑端点击切图,手机端滑动切图
轮播图的实现原理并不难,但是步骤有些繁琐.最近练习了一个轮播图,大部分是跟着网上的教程写的,然后自己做了一点兼容ie8的修改,加了点击切换图片的特效和手机端的滑动特效,让这个轮播图可以在响应式的网站中 ...
- 原生JS面向对象思想封装轮播图组件
原生JS面向对象思想封装轮播图组件 在前端页面开发过程中,页面中的轮播图特效很常见,因此我就想封装一个自己的原生JS的轮播图组件.有了这个需求就开始着手准备了,代码当然是以简洁为目标,轮播图的各个功能 ...
- JQ无缝轮播图-插件封装
类似京东的这种无缝轮播效果: 实例代码下载 HTML代码: <body> <!-- /*觅me 探索生活*/ --> <div class="test" ...
- 原生JS实现移动端轮播图
功能描述: 自动无缝轮播图片,底部小圆点跟图片保持一致:手指左右移动轮播图,移动距离大于50px播放下一张(或上一张),小于50px则回弹 具体功能实现: 1.定时器 自动轮播图片 先声明一个inde ...
- js写的简单轮播图
这个轮播图代码是从网上找来的,专门找了个写法简单的,只是作为一个小练习,大概原理如下: 1.首先是图片切换2.自动播放3.调用自动播放4.移动到容器上边停止播放,离开自动播放5.移动到导航上停止播放, ...
- 原生js的懒人轮播图
<style> body{ margin: 0; padding: 0px;}#carousel{ margin: auto; /* 居中 */ width: 600px; /* 设置宽度 ...
- jQuery插件slides实现无缝轮播图特效
初始化插件: slides是一款基于jQuery无缝轮播图插件,支持图内元素动画,可以自定义动画类型 1 2 3 4 5 6 7 8 9 10 $(".slideInner").s ...
- 封装一个简单的原生js焦点轮播图插件
轮播图实现的效果为,鼠标移入左右箭头会出现,可以点击切换图片,下面的小圆点会跟随,可以循环播放(为了方便理解,没有补2张图做无缝轮播).本篇文章的主要目的是分享封装插件的思路. 轮播图我一开始是写成非 ...
- 原生JavaScript(js)手把手教你写轮播图插件(banner)
---恢复内容开始--- 1.轮播图插件 1.什么是插件: 为已有的程序增加功能 2.插件的特点(为什么要做成一个插件)与注意事项: 1.通用性,可移植性强 2.兼容性:不会对其他代码产生影响 3.创 ...
随机推荐
- CorsConfig
package org.linlinjava.litemall.core.config; import org.springframework.context.annotation.Bean; imp ...
- PAT甲级——1011 World Cup Betting
PATA1011 World Cup Betting With the 2010 FIFA World Cup running, football fans the world over were b ...
- 002.前端开发知识,前端基础HTML(2020-01-07)
一.列表标签 1.无序列表 ul <ul> <li>列表项1</li> <li>列表项2</li> <li>列表项3</l ...
- vue实现tab选项卡切换
上代码: <template> <div class="push"> //点击按钮 <div class="tab&qu ...
- nginx.conf文件详解
https://www.jb51.net/article/103968.htm https://www.cnblogs.com/zhang-shijie/p/5428640.html https:// ...
- iOS有关通讯录操作
一.首先获取用户通讯录授权信息. 在AppDelegate中导入#import <AddressBook/AddressBook.h>框架,在下列方法中获取授权信息. - (BOOL)ap ...
- K3CLOUD表关联
销售订单关联发货通知单 销售订单表 T_SAL_ORDER A T_SAL_ORDERENTRY B T_SAL_ORDERENTRY_LK C 发货通知单表 T_SAL_DELIVERYNOTICE ...
- [LC] 244. Shortest Word Distance II
Design a class which receives a list of words in the constructor, and implements a method that takes ...
- python之循删list
先来看下循环遍历删除list元素的一段代码: L=[1,3,1,4,3,6,5] # 0 1 2 3 4 5 6(下标) for i in L: if i%2!=0:#%表示除商取余数,除以2余数为0 ...
- Visual Studio 2017 Professional 下载
可以进行Office 2013/2016 VSTO开发 安装平台:Win 7 SP1.Win 10. 下载: VisualStudio2017_Professional.rar