用Vue写一个简单的无缝轮播

最新推荐文章于 2024-07-04 02:24:57 发布

授社

最新推荐文章于 2024-07-04 02:24:57 发布

阅读量606

点赞数

分类专栏： web 文章标签： css html vue uni-app

本文链接：https://blog.csdn.net/weixin_44028979/article/details/120847287

版权

web 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

无缝轮播的原理

头尾都是数组第一个然后控制父容器是否有过度动画可以达到一个视觉差

如原数组 [0,1,2,3];
无缝轮播数组[0,1,2,3,0]；
在这里插入图片描述

全部代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dome</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<style>
    * {
        margin: 0px;
        padding: 0px;
    }

    .BannerBlock {
        width: 650px;
        height: 250px;
        background: blanchedalmond;
        margin: auto;
        overflow: hidden;
    }

    .Banner_block {
        width: fit-content;
        height: 240px;
        display: flex;
    }

    .Banner_block>.item {
        width: 650px;
        height: 240px;
        background: lightgreen;
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>

<body>
    <div id="app">
        <div class="BannerBlock">
            <div class="Banner_block"
                :style="{marginLeft:Lfet+'px',width:bannerdata.length-1*650+'px',transition:isTr?'all 0.5s':'none'}">
                <div class="item" v-for="(i,index) in bannerdata" :key='index'>
                    {{i}}
                </div>
            </div>
        </div>
        <div @click='Bannerrigth'>上一个</div>
        <div @click='BannerLfet'>下一个</div>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                bannerdata: [1, 2, 3,4,5,6,7,8,9,1],
                message: 'Hello Vue!',
                isTr: true,
                eindex: 0,
                Lfet: 0,
                isclick: false
            },
            created() {

            },
            methods: {
                Bannerrigth() {
                    if (this.eindex == 0) {
                        this.isTr = false;
                        this.eindex = this.bannerdata.length - 1;
                        this.Lfet = -this.eindex * 650;
                        setTimeout(res => {
                            this.isTr = true;
                            this.eindex--;
                            this.Lfet = -this.eindex * 650;
                        }, 10)
                    } else {
                        this.eindex--;
                        this.Lfet = -this.eindex * 650;
                    }
                },
                BannerLfet() {
                    this.isTr = true;
                    this.eindex++;
                    this.Lfet = -this.eindex * 650;
                    if (this.eindex == this.bannerdata.length - 1) {
                        setTimeout(res => {
                            this.eindex = 0;
                            this.isTr = false;
                            this.Lfet = -this.eindex * 650;
                        }, 500)
                    }
                }
            },
        })
    </script>
</body>
<script type="text/javascript">

</script>

</html>

全代码奉上直接复制可用逻辑简单有问题可评论区问

授社

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用Vue写一个简单的无缝轮播

无缝轮播的原理头尾都是数组第一个然后控制父容器是个有过度动画可以达到一个视觉差如原数组 [0,1,2,3];无缝轮播数组[0,1,2,3,0]；全部代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
复制链接

扫一扫

专栏目录