vue手写轮播
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#app {
width: 1200px;
height: 500px;
border: 1px solid red;
margin: 50px auto;
} .swiper {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
} .item {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 0;
overflow: hidden;
} .active {
z-index: 2
} .animating {
transition: transform .4s ease-in-out;
} .item:nth-child(1) {
background: pink;
} .item:nth-child(2) {
background: green;
} .item:nth-child(3) {
background: blue;
} .item:nth-child(4) {
background: red;
} .item:nth-child(5) {
background: orange;
} .text {
font-size: 50px;
text-align: center;
color: #fff;
line-height: 500px;
} .button {
width: 50px;
height: 100px;
background: #fff;
opacity: .6;
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 3;
} .left {
left: 20px;
} .right {
right: 20px;
} .indicators {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
z-index: 3;
list-style: none;
margin: 0;
padding: 0;
height: 27px;
} .labels {
width: 30px;
height: 3px;
display: inline-block;
padding: 12px 4px;
list-style: none;
margin: 0;
opacity: 0.5;
} .labels-active {
opacity: 1;
} .labels > span {
display: block;
width: 100%;
height: 100%;
background: #fff;
}
</style>
</head>
<body>
<div id="app"></div>
<script src="./vue.global.js"></script>
<script>
// Composition API
const {reactive, onMounted, effect, createApp, onRenderTriggered, computed, watch, onBeforeMount, createComponent} = Vue; const Item = createComponent({
template: `<div class="item text"
:class="{
'active':data.active,
'animating': data.animating
}"
:style="itemStyle()">
<slot></slot>
</div>`,
setup(props) {
let width = 0;
const data = reactive({
translate: 0,
active: false,
animating: false
});
onMounted(() => {
width = document.querySelector('.item').offsetWidth;
translateItem(props.index, props.active, props.length, props.oldIndex);
});
const itemStyle = () => {
const value = `translateX(${data.translate}px)`;
return {
transform: value
}
};
const calcTranslate = (index, active) => {
return width * (index - active);
};
const processIndex = (index, active, length) => {
if (active === 0 && index === length - 1) {
return -1;
} else if (active === length - 1 && index === 0) {
return length;
} else if (index < active - 1 && active - index >= length / 2) {
return length + 1;
} else if (index > active + 1 && index - active >= length / 2) {
return -2;
}
return index;
};
const translateItem = (index, active, length, oldIndex) => {
if (width === 0) {
return;
}
if (oldIndex !== undefined) {
data.animating = index === active || index === oldIndex;
}
if (index !== active && length > 2) {
index = processIndex(index, active, length);
}
data.active = index === active;
data.translate = calcTranslate(index, active);
};
effect(() => {
translateItem(props.index, props.active, props.length, props.oldIndex);
});
return {
data,
itemStyle
}
}
}); const App = {
template: `<div class="swiper"
@mouseenter.stop="removeActive()"
@mouseleave.stop="changeActive()">
<Item v-for="($item, $index) in data.list"
:key="$index"
:index="$index"
:oldIndex="data.oldIndex"
:length="data.list.length"
:active="data.index">
{{$index + 1}}
</Item>
<div class="button left"
@click="activeLeft()">
</div>
<div class="button right"
@click="activeRight()">
</div>
<ul class="indicators">
<li class="labels"
:class="{'labels-active':data.index === $index}"
v-for="($item, $index) in data.list"
@mouseenter="changeLabelsActive($index)">
<span></span>
</li>
</ul>
</div>`,
components: {Item},
setup() {
const data = reactive({
list: [1, 2, 3, 4, 5],
index: 0,
oldIndex: undefined,
time: 3000
});
watch(() => data.index, (val, oldVal) => {
data.oldIndex = oldVal;
});
let time = null;
const _initTimer = (time) => {
return setInterval(() => {
if (data.index < data.list.length - 1) {
data.index++;
} else {
data.index = 0;
}
}, time);
};
onMounted(() => {
time = _initTimer(data.time);
});
const changeActive = () => {
clearInterval(time);
time = _initTimer(data.time);
};
const removeActive = () => {
clearInterval(time);
};
// 节流函数
// 立即执行 在单位时间内只触发一次事件
const throttle = (method, delay) => {
let timer = null;
let start = false;
return function () {
if (!start) {
start = true;
method.apply(this, arguments);
timer = setTimeout(() => {
start = false;
}, delay);
}
};
};
// 防抖函数
// 延迟执行 在事件被触发单位时间内 又被触发 则重新计时
const debounce = (method, delay) => {
let timer = null;
let start = null;
return function () {
let now = Date.now();
if (!start) {
start = now;
}
if (now - start > delay) {
method.apply(this, arguments);
start = now;
} else {
clearTimeout(timer);
timer = setTimeout(() => {
method.apply(this, arguments);
}, delay);
start = now;
}
};
};
const activeLeft = throttle(() => {
if (data.index > 0) {
data.index--;
} else {
data.index = data.list.length - 1;
}
}, 400);
const activeRight = throttle(() => {
if (data.index < data.list.length - 1) {
data.index++;
} else {
data.index = 0;
}
}, 400);
const changeLabelsActive = debounce((index) => {
data.index = index;
}, 400);
return {
data,
changeActive,
removeActive,
activeLeft,
activeRight,
changeLabelsActive
}
}
};
// 挂载
let app = document.getElementById('app');
createApp().mount(App, app);
</script>
</body>
</html>
基于Vue3.0的CSS3动画轮播
vue手写轮播的更多相关文章
- 偏前端-纯css,手写轮播-（焦点切换 和 自动轮播 只可选择一种，两者不可共存）
现在我们一般都是在网上找个轮播插件,各种功能应有尽有,是吧!!~大家似乎已经生疏了手写是什么感觉.万一哪天想不起来,人家要手写,就尴尬了!~~跟我一起复习一下吧 不多说:效果图看一下: 高度不能是固定 ...
- 简单的 js手写轮播图
html: <div class="na1"> <div class="pp"> <div class="na ...
- vue-awesome-swipe 基于vue使用的轮播组件 使用(改)
npm install vue-awesome-swiper --save //基于vue使用的轮播组件 <template> <swiper :options="swi ...
- SpringCloud-Ribbon负载均衡机制、手写轮询算法
Ribbon 内置的负载均衡规则 在 com.netflix.loadbalancer 包下有一个接口 IRule,它可以根据特定的算法从服务列表中选取一个要访问的服务,默认使用的是「轮询机制」 Ro ...
- vue手写的轮播图片，解决已经修改data中的值，页面标签已绑定，但页面没效果
1.效果 2.index.html <!DOCTYPE html> <html lang="en"> <link> <meta chars ...
- vue.js层叠轮播
最近写公司项目有涉及到轮播banner,一般的ui框架无法满足产品需求:所以自己写了一个层叠式轮播组件:现在分享给大家: 主要技术栈是vue.js ;javascript;jquery:确定实现思路因 ...
- mpvue微信小程序怎么写轮播图，和官方微信代码的差别
目前用mpvue很多第三方的ui库是引入不了的,因为它不支持含有dom操作. 那我们要做轮播图的话一个是手写另外一个就是用小程序的swiper组件了: 官方代码: <swiper indicat ...
- 原生Js写轮播图代码
html css js 在知道jQuery如何实现轮播效果的基础上,用js写代码 如图:标记这里的地方 理解一下 用到的知识: 1.HTML DOM 的appendChild() 和 removeCh ...
- 原生JavaScript（js）手把手教你写轮播图插件（banner）
---恢复内容开始--- 1.轮播图插件 1.什么是插件: 为已有的程序增加功能 2.插件的特点(为什么要做成一个插件)与注意事项: 1.通用性,可移植性强 2.兼容性:不会对其他代码产生影响 3.创 ...
随机推荐
- Java ——数字图像处理（Java Graphics及其API简介）
1.创建一个Graphics对象BufferedImage bi = new BufferedImage(120,120, BufferedImage.TYPE_INT_ARGB);Graphics2 ...
- JQ的异步文件上传
一,view代码 <form role="form"> <div class="form-group"> <label for=& ...
- basename函数不能获取url路径中文文件名的问题
basename basename() 函数返回路径中的文件名部分. 语法 basename(path,suffix) 参数 描述 path 必需.规定要检查的路径. suffix 可选.规定文件扩展 ...
- 详聊js中的原型/原型链
先以一段简单的代码为例: function Dog(params){ this.name = param.name; this.age = param.age; this.ba ...
- 逐行读取txt文件，分割，写入txt。。。上传，下载
s = [] f = open('querylist.txt','r') #由于我使用的pycharm已经设置完了路径,因此我直接写了文件名 for lines in f: ls = lin ...
- Linux 内核层和 用户层 配置 GPIO 引脚
Linux BSP 开发的基础就是和GPIO打交道, 下面总结下这几天对某家开发板的GPIO控制的知识. 公司的开发板用的是 DTB 模式 ,首先,进入 dts,dtsi文件查看关于GPIO 的模块 ...
- python常用函数 U
update(dict) 字典合并,生成的为新的字典,新字典操作不会影响老字典. 例子:
- git 使用远程分支覆盖本地分支(重置本地分支)
1 丢弃本地变更 重置为远端分支内容 git reset --hard origin/branchName 如 git reset --hard origin/F_AssetItem
- CentOS下安装Chrome浏览器
1. 下载安装脚本, 在下载目录中,执行以下命令,将安装脚本下载到本地 wget https://intoli.com/install-google-chrome.sh 2.然后授予可执行权限 chm ...
- Linux 系统参数优化
修改系统所有进程可打开的文件数量 sysctl -w fs.file-max=2097152sysctl -w fs.nr_open=2097152 > vi /etc/sysctl.conff ...