Vue implements carousel animation
|
This article example shares the specific code of Vue to realize the carousel animation for your reference. The specific content is as follows The number of images can be any value [1-unlimited]:
<!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%;
}
/* 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/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', //Controls whether the hidden image pops up from the upper left corner or 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 (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);
// When the last one is in the middle, pressing the next one will no longer react console.log(currShowFirst,self.films.length)
if (currShowFirst + 3 == self.films.length){
return;
}
// Change the display and hiding of DOM if (self.configStart == 0) {
self.films[currShowFirst].show = false;
if (currShowFirst + 5 <= this.films.length - 1){// When the second to last or the first to last picture is displayed in the center, you don't need to set which one to display as true when you press it
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(){
// Change DOM's 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) { // When the second to last or the first to last picture is displayed in the center, you don't need to set which picture to display as false when you press the previous one
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 {
// When the first one is in the center, pressing the previous one will no longer react to 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"); //Get all 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';
}
});
// Functional enhancement (the above part has implemented the carousel):
// The following code achieves the goal: the mouse simulates the left and right swipe events on the mobile terminal, and the pictures can be switched by swiping left and right (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; // Get the origin of touch}
function move(event){
if (touchDot !== undefined) {
var touchMove = event.clientX;
// Slide to the left if (touchMove - touchDot <= -40) {
if (flagLeft) {
vm.nextFilm();
flagLeft = false; // You can only swipe one image to the left before the mouse is lifted. flagRight = true; // After swiping the mouse to the left to switch images, you can swipe right again to switch back to the previous image before the mouse is lifted. } else {
touchDot = touchMove;
}
}
// Slide to the right if (touchMove - touchDot >= 40) {
if (flagRight) {
vm.lastFilm();
flagRight = false; // You can only slide one image to the right by swiping right before the mouse is lifted. flagLeft = true; // After swiping right to switch images, you can switch back to the previous image by swiping left again before the mouse is lifted. } else {
touchDot = touchMove;
}
}
}
}
function up(event){
// Lift the mouse to reset everything and proceed to the next step;
flagRight = true;
flagLeft = true;
touchDot = undefined;
}
}())
</script>
</html>The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. You may also be interested in:
|
<<: Solve the 1251 error when establishing a connection between mysql and navicat
Recommend
Detailed explanation of the principle and function of JavaScript closure
Table of contents Introduction Uses of closures C...
Detailed explanation of the differences and usages of Linux system shutdown commands
What are the shutdown commands for Linux systems?...
Vue uses drag and drop to create a structure tree
This article example shares the specific code of ...
How to write elegant JS code
Table of contents variable Use meaningful and pro...
A few steps to easily build a Windows SSH server
The SSH mentioned here is called Security Shell. ...
Complete steps to reset the root user password in mysql8
Preface Recently, many new colleagues have asked ...
CSS style to center the HTML tag in the browser
CSS style: Copy code The code is as follows: <s...
base target="" specifies the target of the base link to open the frame
<base target=_blank> changes the target fram...
How to improve Idea startup speed and solve Tomcat log garbled characters
Table of contents Preface Idea startup speed Tomc...
Pure CSS to achieve candle melting (water droplets) sample code
Achieve results Implementation ideas The melting ...
Docker-compose image release process analysis of springboot project
Introduction The Docker-Compose project is an off...
Summary of common functions of PostgreSQL regular expressions
Summary of common functions of PostgreSQL regular...
Docker meets Intellij IDEA, Java development improves productivity tenfold
Table of contents 1. Preparation before developme...
The difference between delete, truncate, and drop and how to choose
Preface Last week, a colleague asked me: "Br...
TypeScript interface definition case tutorial
The role of the interface: Interface, in English:...