美文网首页让前端飞Web前端之路
用Vue写一个旋转木马的效果

用Vue写一个旋转木马的效果

作者: 虚拟J | 来源:发表于2020-04-10 19:42 被阅读0次

虽然可以直接用别人造好的轮子,但内心其实是有点想自己用Vue写一个(虽然我是React技术栈的)。这样子的话,具体的细节点就可以做到根据需求进行完美的调整啦。
Vue的官网已经了封装组件 <transition-group> ,所以写起来其实感觉简单了许多。

初步

下面的是初步完成需求基础版且复用性不高的代码。

<div  id='carousel'>
    <Carousel :urls="['./images/one.png','./images/two.png','./images/three.png']"> </Carousel>
</div>
    Vue.component('Carousel', {
        props: { urls: Array },
        data: function () {
            return {
                style: [
                    {
                        width: "590px",
                        left: "-160px",
                        top: "50px",
                        zIndex: 2,
                        position: 'absolute',
                        transition: 'all 1s',
                    },
                    {
                        width: "760px",
                        zIndex: 3,
                        left: "0px",
                        top: "0px",
                        position: 'absolute',
                        transition: 'all 1s',
                    },
                    {
                        width: "590px",
                        left: "330px",
                        top: "50px",
                        zIndex: 2,
                        position: 'absolute',
                        transition: 'all 1s',
                    }
                ],
                previous: 0,
                now: Date.now()
            }
        },
        methods: {
            switchLeft: function () {
             //向左切换
                this.now = Date.now();
                if (this.now - this.previous > 1000) {
                    this.style.push(this.style.shift());
                    this.previous = this.now;
                }
            },
            switchRight: function () {
             //向右切换
                this.now = Date.now();
                if (this.now - this.previous > 1000) {
                    this.style.unshift(this.style.pop());
                    this.previous = this.now;
                }
            }
        },
        template: `
        <div>
        <transition-group
          name="carousel"
          tag="ul"
         >
        <li v-for="(item, index) in urls" :key="item" :style="style[index]">
          <img :src="item" >
         </li>
        </transition-group>
        <span class='left' @click="switchLeft"> <span class="arrows"></span></span>
        <span class='right' @click="switchRight"> <span class="arrows"></span></span>
        </div>
        `,
    })
#carousel ul {
    position : relative;
    width    : 760px;
    margin   : auto;
    transform: translateY(50%);
    list-style: none;
}
#carousel li img {
    width: 100%;
    box-shadow: 0px 20px 20px 0px rgba(0, 0, 0, 0.1);
}
.left,
.right {
    width          : 64px;
    height         : 64px;
    background     : rgba(189, 197, 205, 0.4);
    border-radius  : 50%;
    position       : absolute;
    right          : 10%;
    display        : flex;
    justify-content: center;
    align-items    : center;
    top            : 50%;
    transform      : translateY(-50%);
    cursor         : pointer;
}
.left {
    left: 10%;
}
.right {
    right: 10%;
}
.left .arrows,
.right .arrows {
    width    : 15px;
    height   : 15px;
    border   : 4px solid #fff;
    transform: rotate(45deg);
}
.left .arrows {
    border-top-color  : transparent;
    border-right-color: transparent;
    margin-left       : 10px;
}
.right .arrows {
    border-bottom-color: transparent;
    border-left-color  : transparent;
    margin-right       : 10px;
    top                : 50%;
}

失败的更改成配置项的过程

在优化的过程中,发现了想要在transition-group组件中加入动态的style去控制宽度,是做不到的。(这个不是必须的,只是明白了而已)

要更改为配置项,那么之前的style数组就应该是根据图片数量自动生成的。但在created时期生成数据或者直接computed时候生成数据,都出现了更新数据,视图都没有更新的情况,应该是我对vue没有深入过,导致没有理解到其原理。以后有机会再做。

相关文章

  • 用Vue写一个旋转木马的效果

    虽然可以直接用别人造好的轮子,但内心其实是有点想自己用Vue写一个(虽然我是React技术栈的)。这样子的话,具体...

  • jq实现旋转木马

    JQ实现旋转木马 最近公司要做一个官网,可能会用到旋转木马的功能,自己并不喜欢用网上那些插件去实现,想自己写一个,...

  • vue 旋转木马

    以下是5张图片的配置, 图片减少或者增加都需要修改 config

  • 图片旋转木马效果

    话不多说,看代码吧 1, 结构 2, 样式 3, javaScript

  • 各种弹幕实现研究

    1、弹幕效果 2、旋转效果 2.旋转木马 3、改变透明度效果 4、超链接弹幕效果 5、绘图+渐隐 效果 代码: 6...

  • Vue css 旋转木马

    transform 属性应用 translate3d、rotate @keyframes 线性动画 运行效果 代码

  • 原生JS创建旋转木马效果

    今天来说说旋转木马的效果,这个好像平时用的不多,比如一些视频类的网站才有用的,因为效果看起来还是蛮炫酷的?,效果图...

  • 私房故事【4】:旋转木马的爱情

    旋转木马的传说:有人说旋转木马是见证两个相爱的人的爱情游戏,只要两个真心相爱的人同时坐在旋转木马上,木马就会载着他...

  • vue, js写一个手持弹幕

    两天时间用vue写一个手持弹幕,(没有完成所有功能) 先看一下效果 这里使用vue 写的,只支持vue语法。后期有...

  • web前端学习,JS—案例:旋转木马

    案例:旋转木马 页面加载时候出现的效果,script标签写在head里面,body上面 显示一个图片散开的动画,遍...

网友评论

    本文标题:用Vue写一个旋转木马的效果

    本文链接:https://www.haomeiwen.com/subject/qbdtmhtx.html