怎么用Vue组件实现旋转木马动画

这篇文章主要介绍"怎么用Vue组件实现旋转木马动画"的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇"怎么用Vue组件实现旋转木马动画"文章能帮助大家解决问题。

源码如下

js：

export default {  data() {    return {      piclist: [        { url: require("../image/pic1.png") },        { url: require("../image/pic2.png") },        { url: require("../image/pic3.png") }      ],      //文件图片配置      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: {  //实现点击按钮切换的动画，设置时间参数防止多次点击    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;}

关于"怎么用Vue组件实现旋转木马动画"的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注行业资讯频道，小编每天都会为大家更新不同的知识点。