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.创 ...
随机推荐
- [转载]企业级应用架构(NHibernater+Spring.Net+MVC3)
本人已经从事公司两套这类架构系统的开发工作啦!对于这套架构,我惊叹不已!BPS和CMS系统都是采用这套架构.但本人也同时渐渐发现了这套架构有诸多 不足之处,于是本人利用闲暇时光进一步改进了这套架构.新 ...
- Django：django-debug-toolbar模块
简介: Django的django-debug-toolbar 模块是一组可配置的面板,可显示有关当前请求/响应的各种调试信息,并在单击时显示有关面板内容的更多详细信息. GitHub源文件下载地址 ...
- js超简单冒泡算法
点击按钮--从大到小排序,可以通过代码中大于号小于号的选择来判定从小到大或者从大到小. <!DOCTYPE html> <html> <head> <titl ...
- 前端开发HTML&css入门——CSS的文本格式化
长度单位 像素 px 百分比 % em - 像素是我们在网页中使用的最多的一个单位, * 一个像素就相当于我们屏幕中的一个小点, * 我们的屏幕实际上就是由这些像素点构成的 * 但是这些像素点,是不能 ...
- CogniViewPDF2XL——将PDF表格转化为Excell表的软件
1. 下载官网地址:http://www.cogniview.com/download 2. 安装完后的样子
- <s:iterator>标签迭代数据不显示
<s:iterator>标签迭代数据不显示 <s:iterator value="#request.voteOptionList" var="voteO ...
- [好好学习]在VMware中安装Oracle Enterprise Linux (v5.7) - (2/5)
- 查看Xcode里的描述文件
iOS应用打包离不开描述文件,也就是mobileprovision文件. 一般我们的操作是双击,Xcode就会运行该文件.但是具体文件里是什么,Xcode又是否真的加载了该文件?文件里又描述了什么呢? ...
- unity2017 光照与渲染（二）FAQs
FAQ: 场景里的物体没有影子? 1)灯光是否开了影子 2)QualitySettings 中 shadows 的设置 3) 模型MeshRenderer 的 ReciveShadows 和 Cast ...
- Windows下的Linux子系统安装，WSL 2下配置docker
Windows下的Linux子系统安装,WSL 2下配置docker 前提条件: 安装WSL 2需要Windows 10版本是Build 18917或更高,首先先确认系统版本已升级. 在“启用或关闭W ...