vue实现旋转木马动画

第vue实现旋转木马动画本文实例为大家分享了vue实现旋转木马动画的具体代码，供大家参考，具体内容如下

图片数量可为任意值都能正常处理[1-无限个]：

!DOCTYPEhtml

html

head

title/title

metacharset="UTF-8"

metahttp-equiv="Access-Control-Allow-Origin"content="*"

scriptsrc="/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%;

position:relative;

width:100%;

list-style:none;

ulli{

position:absolute;

top:0;

left:0;

z-index:1;

width:0rem;

height:0rem;

text-align:center;

ulli.film-show{

transition:all1s;

width:87rem;

height:50rem;

ulliimg{

/*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-repeatlefttop;

background-size:100%100%;

.next{

right:0;

background:url("./imgs/arrow-right.png")no-repeatrighttop;

background-size:100%100%;

.filmindex{

color:#cb2e2e;

font-size:2.4rem;

position:absolute;

bottom:12rem;

left:50%;

transform:translateX(-50%);

/style

/head

body

divid='app'

ulid="slide"

liv-for='(item,index)infilms'

:key='index'

v-bind:class="item.show'film-show':''"

v-bind:

v-bind:data-index='index'

imgv-bind:src="item.image"alt=""

/li

/ul

span{{filmCurrIndex+1+'/'+films.length}}/span

divid="arrow"

ahref="javascript:;"id="arrPrev"@click='last'/a

ahref="javascript:;"id="arrNext"@click='next'/a

/div

/div

/body

script

varvm=newVue({

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.lessNum5){

this.nextFilmLessFive();

}else{

this.nextFilm();

last(){

if(this.lessNum5){

this.lastFilmLessFive();

}else{

this.lastFilm();

nextFilm(){

letself=this;

this.filmsHideLeft='185rem';

letcurrShowFirst=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;

}elseif(self.configStart==1){

self.films[4].show=true;

self.configStart=0;

}elseif(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-1this.films.length-1:this.filmCurrIndex+1);

self.assign();

lastFilm(){

letself=this;

this.filmsHideLeft='0rem';

letcurrShowFirst=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;

}elseif(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)00:(this.filmCurrIndex-1);

self.assign();

lastFilmLessFive(){

letcurrShowFirst=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;

}elseif(this.configStart===1){

this.configStart=2;

this.films[3].show=false

}elseif(this.lessNum===3){

if(this.configStart===1){

this.configStart=2;

}elseif(this.configStart===0){

this.configStart=1;

}elseif(this.lessNum===2){

if(this.configStart===1){

this.configStart=2;

this.$nextTick(function(){

this.filmCurrIndex=(this.filmCurrIndex-1)00:(this.filmCurrIndex-1);

this.assign();

nextFilmLessFive(){

letcurrShowFirst=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;

}elseif(this.configStart===1){

this.configStart=0;

}else{

this.films[0].show=false;

}elseif(this.lessNum===3){

if(this.configStart===1){

this.configStart=0;

}elseif(this.configStart===2){

this.configStart=1;

}elseif(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-1this.films.length-1:this.filmCurrIndex+1);

this.assign();

assign(){

letself=this;

varlist=document.getElementById("slide").getElementsByClassName("film-show");//拿到所有li

for(vari=0;ilist.length;i++){

letjson=self.config[i+this.configStart];

for(varattrinjson){

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(){

letrootWidth=document.documentElement.clientWidth||document.body.clientWidth;

letrootDom=document.querySelector('html');

rootDom.style.fontSize=rootWidth/1920*10+'px';

//功能增强(以上部分已经实现了旋转木马)：

//以下代码实现目标：鼠标模拟移动端的左滑右滑事件，在左滑右滑中可以切换图片

(function(){

vartouchDot,flagLeft=true,flagRight=true;

varbodyDom=document.querySelector('body');

bodyDom.addEventListener('mousedown',down,false);

bodyDom.addEventListener('mousemove',move,false);

bodyDom.addEventListen