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
Implementation steps of vue-element-admin to build a backend management system
Recently, when I was working on a conference heal...
Solution to overflow of html table
If the table is wide, it may overflow. For exampl...
Use Docker to build a Git image using the clone repository
Overview I have been using Docker for more than a...
Share the pitfalls of MySQL's current_timestamp and their solutions
Table of contents MySQL's current_timestamp p...
Quickly learn MySQL basics
Table of contents Understanding SQL Understanding...
How to build lnmp environment in docker
Create a project directory mkdir php Create the f...
How to understand Vue front-end and back-end data interaction and display
Table of contents 1. Technical Overview 2. Techni...
MySQL SQL statement method to hide the middle four digits of the mobile phone number
First query table structure (sys_users): SELECT *...
On good design
<br />For every ten thousand people who answ...
MySQL 5.7.18 download and installation process detailed instructions
MySql Download 1. Open the official website and f...
Detailed explanation of the Sidecar mode in Docker Compose
Table of contents What is Docker Compose Requirem...
A brief discussion on the use of Web Storage API
Table of contents 1. Browser local storage techno...
Solve the problem of Docker starting Elasticsearch7.x and reporting an error
Using the Docker run command docker run -d -p 920...
Tutorial on using $attrs and $listeners in Vue
Table of contents introduce Example Summarize int...
Implementation of vertical centering with unknown height in CSS
This article mainly introduces the implementation...