vue实现旋转木马动画
更新时间：2021年7月23日 00:00 点击：2305
本文实例为大家分享了vue实现旋转木马动画的具体代码，供大家参考，具体内容如下
图片数量可为任意值都能正常处理 [1-无限个]：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<meta http-equiv="Access-Control-Allow-Origin" content="*">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
html,body{
font-size: 100px;
}
html,body{
width: 100%;
height: 100%;
overflow: hidden;
}
.film-box{
width:100%;
height: 100%;
}
ul{
position: relative;
width: 100%;
list-style: none;
}
ul li {
position: absolute;
top: 0;
left: 0;
z-index: 1;
width:0rem;
height: 0rem;
text-align: center;
}
ul li.film-show{
transition: all 1s;
width: 87rem;
height: 50rem;
}
ul li img {
/* width: 100%; */
height: 100%;
}
/* 左右箭头 */
.arrow {
position: absolute;
width: 100%;
top: 50%;
/* opacity: 0; */
z-index: 3;
}
.prev,.next {
position: absolute;
height: 5rem;
width: 3rem;
border-radius: 50%;
top: 50%;
margin-top: -56px;
overflow: hidden;
text-decoration: none;
}
.prev{
left: 0;
background: url("./imgs/arrow-left.png") no-repeat left top;
background-size: 100% 100%;
}
.next{
right: 0;
background: url("./imgs/arrow-right.png") no-repeat right top;
background-size: 100% 100%;
}
.filmindex{
color: #cb2e2e;
font-size: 2.4rem;
position: absolute;
bottom: 12rem;
left: 50%;
transform: translateX(-50%);
}
</style>
</head>
<body>
<div class="film-box" id='app'>
<ul id="slide">
<li v-for='(item,index) in films'
:key='index'
v-bind:class="item.show ? 'film-show' : ''"
v-bind:style="{left:filmsHideLeft}"
v-bind:data-index = 'index' >
<img v-bind:src="item.image" alt="">
</li>
</ul>
<span class="filmindex">{{ filmCurrIndex + 1 + '/' + films.length}}</span>
<div class="arrow" id="arrow">
<a href="javascript:;" id="arrPrev" class="prev" @click='last'></a>
<a href="javascript:;" id="arrNext" class="next" @click='next'></a>
</div>
</div>
</body>
<script>
var vm = new Vue({
el:'#app',
data:{
films:[],
filmsHideLeft:'0rem',//控制隐藏图片是从左上角跳出来还是从右上角跳出来
configStart:0,
filmCurrIndex:2,
config:[
{
"transform":"scale(0.6)",
"top": '5rem',
"left": '-13rem',
"zIndex": 2,
"backgroundColor":"#98E0AD"
}, //0
{
"transform":"scale(0.8)",
"top": '3rem',
"left": '13rem',
"zIndex": 3,
"backgroundColor":"#BAD1F0"
}, //1
{
"transform":"scale(1)",
"top": '2rem',
"left": '45rem',
"zIndex": 4,
"backgroundColor":"#F3DFDE"
}, //2
{
"transform":"scale(0.8)",
"top": '3rem',
"left": '93rem',
"zIndex": 3,
"backgroundColor":"#BAD1F0"
}, //3
{
"transform":"scale(0.6)",
"top": '5rem',
"left":'113rem',
"zIndex": 2,
"backgroundColor":"#98E0AD"
}, //4
],
lessNum:0,
},
methods:{
next(){
if (this.lessNum < 5) {
this.nextFilmLessFive();
} else {
this.nextFilm();
}
},
last(){
if (this.lessNum < 5) {
this.lastFilmLessFive();
} else {
this.lastFilm();
}
},
nextFilm(){
let self = this;
this.filmsHideLeft = '185rem';
let currShowFirst = parseInt(document.querySelectorAll('.film-show')[0].dataset.index);
// 最后一个位于正中央时按下一个不再反应
console.log(currShowFirst,self.films.length)
if (currShowFirst + 3 == self.films.length){
return;
}
// 改变DOM的显示与隐藏
if (self.configStart == 0) {
self.films[currShowFirst].show = false;
if (currShowFirst + 5 <= this.films.length - 1){// 正中央显示的是倒数第二张或倒数第一张时，按下一个不需要设置哪张显示成true
self.films[currShowFirst + 5].show = true;
}
}else if (self.configStart == 1) {
self.films[4].show = true;
self.configStart = 0;
} else if(self.configStart == 2){
self.films[3].show = true;
self.configStart = 1;
}
console.log(self.films)
self.$nextTick(function(){
// 改变DOM的left,top,scale,zIndex,backgroundColor
this.filmCurrIndex = (this.filmCurrIndex + 1 >= this.films.length - 1 ? this.films.length - 1 : this.filmCurrIndex + 1);
self.assign();
})
},
lastFilm(){
let self = this;
this.filmsHideLeft = '0rem';
let currShowFirst = parseInt(document.querySelectorAll('.film-show')[0].dataset.index);
if (currShowFirst !== 0) {
self.films[currShowFirst -1].show = true;
if (currShowFirst + 4 <= this.films.length -1) {// 正中央显示的是倒数第二张或倒数第一张时，按上一个不需要设置哪张显示成false
self.films[currShowFirst + 4].show = false;
}
} else {
if (self.configStart == 0) {
self.configStart = 1;
self.films[4].show = false;
} else if (self.configStart == 1) {
self.configStart = 2;
self.films[3].show = false;
} else {
// 第一个位于正中央时按上一个不再反应
return;
}
}
console.log(self.films)
self.$nextTick(function(){
this.filmCurrIndex = (this.filmCurrIndex - 1) < 0 ? 0 : (this.filmCurrIndex - 1);
self.assign();
})
},
lastFilmLessFive(){
let currShowFirst = parseInt(document.querySelectorAll('.film-show')[0].dataset.index);
if (this.lessNum === 4) {
if (!this.films[0].show) {
this.films[0].show = true;
} else {
if (this.configStart === 2) return;
if (this.configStart === 0) {
this.configStart = 1;
} else if (this.configStart === 1) {
this.configStart = 2;
this.films[3].show = false
}
}
} else if (this.lessNum === 3) {
if (this.configStart === 1) {
this.configStart = 2;
} else if (this.configStart === 0) {
this.configStart = 1;
}
} else if (this.lessNum === 2) {
if (this.configStart === 1) {
this.configStart = 2;
}
}
this.$nextTick(function(){
this.filmCurrIndex = (this.filmCurrIndex - 1) < 0 ? 0 : (this.filmCurrIndex - 1);
this.assign();
})
},
nextFilmLessFive(){
let currShowFirst = parseInt(document.querySelectorAll('.film-show')[0].dataset.index);
if (this.lessNum === 4) {
if (!this.films[0].show) return;
if (this.configStart === 2) {
this.configStart = 1;
this.films[3].show = true;
} else if (this.configStart === 1) {
this.configStart = 0;
} else {
this.films[0].show = false;
}
} else if (this.lessNum === 3) {
if (this.configStart === 1) {
this.configStart = 0;
} else if (this.configStart === 2) {
this.configStart = 1;
}
} else if (this.lessNum === 2) {
if (this.configStart === 2) {
this.configStart = 1;
}
}
this.$nextTick(function(){
console.log(this.filmCurrIndex,this.films.length)
this.filmCurrIndex = (this.filmCurrIndex + 1 >= this.films.length - 1 ? this.films.length - 1 : this.filmCurrIndex + 1);
this.assign();
})
},
assign() {
let self = this;
var list= document.getElementById("slide").getElementsByClassName("film-show"); //拿到所有li
for (var i = 0; i < list.length; i++){
let json = self.config[i + this.configStart];
for (var attr in json) {
list[i].style[attr] = json[attr];
}
}
}
},
mounted(){
this.films = this.films.concat([
{image:'./imgs/9.jpeg',show:true},
{image:'./imgs/1.jpg',show:true},
{image:'./imgs/2.jpg',show:true},
{image:'./imgs/3.jpg',show:true},
{image:'./imgs/4.jpg',show:true},
// {image:'./imgs/5.jpg',show:false},
// {image:'./imgs/6.jpg',show:false},
// {image:'./imgs/7.jpg',show:false},
// {image:'./imgs/8.jpg',show:false},
]);
this.$nextTick(function(){
this.lessNum = this.films.length;
if (this.lessNum === 3) {
this.configStart = 1;
this.filmCurrIndex = 1;
}
if (this.lessNum === 2) {
this.configStart = 2;
this.filmCurrIndex = 0;
}
if (this.lessNum === 1) {
this.configStart = 2;
this.filmCurrIndex = 0;
}
this.assign();
})
},
created(){
let rootWidth = document.documentElement.clientWidth || document.body.clientWidth;
let rootDom = document.querySelector('html');
rootDom.style.fontSize = rootWidth / 1920 * 10 + 'px';
}
});
// 功能增强(以上部分已经实现了旋转木马)：
// 以下代码实现目标：鼠标模拟移动端的左滑右滑事件，在左滑右滑中可以切换图片
(function(){
var touchDot,flagLeft = true,flagRight = true;
var bodyDom = document.querySelector('body');
bodyDom.addEventListener('mousedown',down,false);
bodyDom.addEventListener('mousemove',move,false);
bodyDom.addEventListener('mouseup',up,false);
bodyDom.addEventListener('mouseout',up,false);
function down(event){
touchDot = event.clientX; // 获取触摸时的原点
}
function move(event){
if (touchDot !== undefined) {
var touchMove = event.clientX;
// 向左滑动
if (touchMove - touchDot <= -40) {
if (flagLeft) {
vm.nextFilm();
flagLeft = false;// 鼠标未抬起之前持续左滑最多只能左滑一张图片
flagRight = true;// 鼠标左滑切换图片后，鼠标未抬起之前可以通过再右滑切换回到之前的图片
} else {
touchDot = touchMove;
}
}
// 向右滑动
if (touchMove - touchDot >= 40) {
if (flagRight) {
vm.lastFilm();
flagRight = false; // 鼠标未抬起之前持续右滑最多只能右滑一张图片
flagLeft = true;// 鼠标右滑切换图片后，鼠标未抬起之前可以通过再左滑切换回到之前的图片
} else {
touchDot = touchMove;
}
}
}
}
function up(event){
// 鼠标抬起重置一切可以进行下一步操作;
flagRight = true;
flagLeft = true;
touchDot = undefined;
}
}())
</script>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持猪先飞。
上一篇: Vue组件实现旋转木马动画
下一篇: Vue实现牌面翻转效果
相关文章
- 这篇文章主要介绍了vue中activated的用法，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下...2021-01-03
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
这篇文章主要介绍了基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2021-02-23- 这篇文章主要介绍了Vue基于localStorage存储信息代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-11-16
Antd-vue Table组件添加Click事件,实现点击某行数据教程
这篇文章主要介绍了Antd-vue Table组件添加Click事件,实现点击某行数据教程，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-17- 这篇文章主要介绍了vue 监听 Treeselect 选择项的改变操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01
- 这篇文章主要介绍了vue 实现动态路由的方法，文中示例代码非常详细，帮助大家更好的理解和学习，感兴趣的朋友可以了解下...2020-07-06
- 这篇文章主要介绍了Vue组件跨层级获取组件操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-28
- 这篇文章主要介绍了vue 获取到数据但却渲染不到页面上的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-11-19
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
这篇文章主要介绍了antdesign-vue结合sortablejs实现两个table相互拖拽排序功能,本文通过实例图文相结合给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2021-01-09vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
这篇文章主要介绍了vuejs element table 表格添加行,修改,单独删除行,批量删除行操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-18- 这篇文章主要介绍了vue treeselect获取当前选中项的label实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01
- 这篇文章主要给大家介绍了关于Vue中slot-scope的深入理解，这个教程非常适合初学者,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-04-17
- 这篇文章主要介绍了Vue 3.0 中 jsx 语法使用，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下...2020-11-13
- 最常见的多环境配置，就是开发环境配置,和生产环境配置，本文主要介绍了vue项目多环境配置的实现，感兴趣的可以了解一下...2021-07-20
vue项目页面嵌入代码块vue-prism-editor的实现
这篇文章主要介绍了vue项目页面嵌入代码块vue-prism-editor的实现,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2020-10-30vue Treeselect下拉树只能选择第N级元素实现代码
这篇文章主要介绍了vue Treeselect下拉树只能选择第N级元素实现代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01- 这篇文章主要为大家详细介绍了vue实现同时设置多个倒计时，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-05-20
解决vue的router组件component在import时不能使用变量问题
这篇文章主要介绍了解决vue的router组件component在import时不能使用变量问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-27Ant design vue table 单击行选中 勾选checkbox教程
这篇文章主要介绍了Ant design vue table 单击行选中 勾选checkbox教程，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-25- 这篇文章主要为大家详细介绍了vue实现div单选多选功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2020-07-16