This article has shared the specific code for vue to implement carousel animation for your reference. The specific content is as follows
The number of pictures can be processed normally at any value [1-unlimited]:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<meta http-equiv="Access-Control-Allow-Origin" content="*">
<script src="/npm/vue/dist/"></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 -show{
transition: all 1s;
width: 87rem;
height: 50rem;
}
ul li img {
/* width: 100%; */
height: 100%;
}
/* left and right arrows */
.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/") no-repeat left top;
background-size: 100% 100%;
}
.next{
right: 0;
background: url("./imgs/") 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 >
<li v-for='(item,index) in films'
:key='index'
v-bind:class=" ? 'film-show' : ''"
v-bind:style="{left:filmsHideLeft}"
v-bind:data-index = 'index' >
<img v-bind:src="" alt="">
</li>
</ul>
<span class="filmindex">{{ filmCurrIndex + 1 + '/' + }}</span>
<div class="arrow" >
<a href="javascript:;" class="prev" @click='last'></a>
<a href="javascript:;" class="next" @click='next'></a>
</div>
</div>
</body>
<script>
var vm = new Vue({
el:'#app',
data:{
films:[],
filmsHideLeft:'0rem',//Control whether the hidden picture jumps out from the upper left corner or from the upper right corner 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 ( < 5) {
();
} else {
();
}
},
last(){
if ( < 5) {
();
} else {
();
}
},
nextFilm(){
let self = this;
= '185rem';
let currShowFirst = parseInt(('.film-show')[0].);
// When the last one is in the center, press the next one and no longer reacts (currShowFirst,)
if (currShowFirst + 3 == ){
return;
}
// Change the display and hide of the DOM if ( == 0) {
[currShowFirst].show = false;
if (currShowFirst + 5 <= - 1){// When the penultimate or penultimate picture is displayed in the center, press one without setting which picture is displayed to true [currShowFirst + 5].show = true;
}
}else if ( == 1) {
[4].show = true;
= 0;
} else if( == 2){
[3].show = true;
= 1;
}
()
self.$nextTick(function(){
// Change the DOM's left, top, scale, zIndex, backgroundColor = ( + 1 >= - 1 ? - 1 : + 1);
();
})
},
lastFilm(){
let self = this;
= '0rem';
let currShowFirst = parseInt(('.film-show')[0].);
if (currShowFirst !== 0) {
[currShowFirst -1].show = true;
if (currShowFirst + 4 <= -1) {// When the penultimate or penultimate picture is displayed in the center, press the previous one without setting which one is displayed as false [currShowFirst + 4].show = false;
}
} else {
if ( == 0) {
= 1;
[4].show = false;
} else if ( == 1) {
= 2;
[3].show = false;
} else {
// When the first one is in the center, press the previous one and no longer responds return;
}
}
()
self.$nextTick(function(){
= ( - 1) < 0 ? 0 : ( - 1);
();
})
},
lastFilmLessFive(){
let currShowFirst = parseInt(('.film-show')[0].);
if ( === 4) {
if (![0].show) {
[0].show = true;
} else {
if ( === 2) return;
if ( === 0) {
= 1;
} else if ( === 1) {
= 2;
[3].show = false
}
}
} else if ( === 3) {
if ( === 1) {
= 2;
} else if ( === 0) {
= 1;
}
} else if ( === 2) {
if ( === 1) {
= 2;
}
}
this.$nextTick(function(){
= ( - 1) < 0 ? 0 : ( - 1);
();
})
},
nextFilmLessFive(){
let currShowFirst = parseInt(('.film-show')[0].);
if ( === 4) {
if (![0].show) return;
if ( === 2) {
= 1;
[3].show = true;
} else if ( === 1) {
= 0;
} else {
[0].show = false;
}
} else if ( === 3) {
if ( === 1) {
= 0;
} else if ( === 2) {
= 1;
}
} else if ( === 2) {
if ( === 2) {
= 1;
}
}
this.$nextTick(function(){
(,)
= ( + 1 >= - 1 ? - 1 : + 1);
();
})
},
assign() {
let self = this;
var list= ("slide").getElementsByClassName("film-show"); //Get all li for (var i = 0; i < ; i++){
let json = [i + ];
for (var attr in json) {
list[i].style[attr] = json[attr];
}
}
}
},
mounted(){
= ([
{image:'./imgs/',show:true},
{image:'./imgs/',show:true},
{image:'./imgs/',show:true},
{image:'./imgs/',show:true},
{image:'./imgs/',show:true},
// {image:'./imgs/',show:false},
// {image:'./imgs/',show:false},
// {image:'./imgs/',show:false},
// {image:'./imgs/',show:false},
]);
this.$nextTick(function(){
= ;
if ( === 3) {
= 1;
= 1;
}
if ( === 2) {
= 2;
= 0;
}
if ( === 1) {
= 2;
= 0;
}
();
})
},
created(){
let rootWidth = || ;
let rootDom = ('html');
= rootWidth / 1920 * 10 + 'px';
}
});
// Function enhancement (the above part has implemented a carousel): // The following code achieves the goal: the mouse simulates the left and right sliding event of the mobile terminal, and the picture can be switched in the left and right sliding (function(){
var touchDot,flagLeft = true,flagRight = true;
var bodyDom = ('body');
('mousedown',down,false);
('mousemove',move,false);
('mouseup',up,false);
('mouseout',up,false);
function down(event){
touchDot = ; // Get the origin of touch }
function move(event){
if (touchDot !== undefined) {
var touchMove = ;
// Swipe left if (touchMove - touchDot <= -40) {
if (flagLeft) {
();
flagLeft = false;// Swipe left until the mouse is lifted and can only slide left at most one picture flagRight = true;// After swiping the mouse left to switch the picture, you can switch back to the previous picture by swiping right before the mouse is lifted } else {
touchDot = touchMove;
}
}
// Swipe right if (touchMove - touchDot >= 40) {
if (flagRight) {
();
flagRight = false; // Swipe right before the mouse is raised and can only swipe right at most one picture flagLeft = true;// After swiping the mouse right to switch the picture, you can switch back to the previous picture by swiping left before the mouse is lifted } else {
touchDot = touchMove;
}
}
}
}
function up(event){
// Mouse lift and reset everything can be performed in the next step; flagRight = true;
flagLeft = true;
touchDot = undefined;
}
}())
</script>
</html>
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.