怎么用vue实现旋转木马动画
这篇“怎么用vue实现旋转木马动画”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“怎么用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实现旋转木马动画”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注蜗牛博客行业资讯频道。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：niceseo99@gmail.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
版权声明：如无特殊标注，文章均为本站原创，转载时请以链接形式注明文章出处。
评论