本文实例为大家分享了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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
© 版权声明
THE END
暂无评论内容