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>
以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。