Shulou(Shulou.com)05/31 Report--

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.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.