How to use Vue components to realize Carousel Animation
This article mainly introduces "how to use Vue components to achieve merry-go-round animation" related knowledge, editor through the actual case to show you the operation process, the method of operation is simple and fast, practical, I hope that this "how to use Vue components to achieve merry-go-round animation" article can help you solve the problem.
The source code is as follows
Js:
Export default {data () {return {piclist: [{url: require (".. / image/pic1.png")}, {url: require (".. / image/pic2.png")}, {url: require (".. / image/pic3.png")}], / / File image configuration config: [{position: "absolute" Width: "400px", top: "20px", left: "50px", opacity: 0.2, zIndex: 2, transition: "1s"}, {position: "absolute", width: "800px", top: "100px", left: "200px" Opacity: 1, zIndex: 4, transition: "1s"}, {position: "absolute", width: "400px", top: "20px", left: "750px", opacity: 0.2, zIndex: 2, transition: "1s"}] Previous: 0, now: Date.now ()} }, methods: {/ / realize the animation of clicking the button switch, and set the time parameter to prevent multiple clicks: turnleft: function () {this.now = Date.now (); if (this.now-this.previous > 1000) {this.config.push (this.config.shift ()); this.previous = this.now }, turnright: function () {this.now = Date.now (); if (this.now-this.previous > 1000) {this.config.unshift (this.config.pop ()); this.previous = this.now;}
Css:
* {margin: 0; padding: 0;} # wrapper {margin: auto; height: 500px; width: 79%; position: relative;} ul {list-style: none;} li img {height: 500px; width: 100%;} .prev, .next {position: absolute; height: 60px; width: 60px; border-radius: 50%; top: 50%; margin-top:-56px; overflow: hidden; text-decoration: none; background-color: aqua Z-index: 5; opacity: 1;}. Prev {left: 0;}. Next {right: 0;}. Picleft {width: 400; top: 20; left: 50; opacity: 0.2; z-index: 2;}. Piccenter {width: 800; top: 100; left: 200; opacity: 1; z-index: 4;}. Picright {width: 400; top: 20; left: 750; opacity: 0.2; z-index: 2 } about "how to use Vue components to achieve merry-go-round animation" content is introduced here, thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.
