无缝轮播图（vue的transition-group组件）

最新推荐文章于 2024-12-26 09:34:38 发布

Onion_Bsb

最新推荐文章于 2024-12-26 09:34:38 发布

阅读量894

点赞数 15

文章标签： vue.js

本文链接：https://blog.csdn.net/2302_76980664/article/details/136517190

版权

文章介绍了如何通过CSS和Vue的transition及transition-group组件实现常规轮播图的无缝衔接，包括控制轮播图的位置切换和动画效果，以及利用`v-enter`等状态类实现无缝滚动。

摘要由CSDN通过智能技术生成

常规的无缝轮播图的写法是要通过控制banner的transition属性的有无来使得其无缝衔接

eg：

css

<style>
        * {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .banner-container,
        .banner-view {
            width: 700px;
            height: 400px;
            background-color: antiquewhite;
            position: relative;
            margin: auto;
        }

        .banner-view {
            overflow: hidden;
        }

        .next {
            width: 50px;
            height: 50px;
            position: absolute;
            top: 50%;
            right: -100px;
            transform: translateY(-50%);
            background-color: burlywood;
        }

        .pre {
            width: 50px;
            height: 50px;
            position: absolute;
            top: 50%;
            left: -100px;
            transform: translateY(-50%);
            background-color: burlywood;
        }

        .banner {
            width: 700px;
            height: 400px;
            position: relative;
            display: flex;
        }

        .banner li {
            width: 700px;
            height: 400px;
        }
    </style>

html代码如下，通过vue来控制轮播图的位置以及显示

<div id="app">
    <div class="banner-container">
         <div class="banner-view">
              <ul class="banner" :style="        {width:`${700*colorArr.length}px`,left:`${-700*count}px`,transition:time}">
                    <li v-for="(item,index) in colorArr" :style="{'background-                                
                        color':item}">{{item}}
                    </li>
              </ul>
          </div>
          <!-- 下一张的按钮 -->
          <div class="next" @click="next"></div>
          <!-- 前一张的按钮 -->
          <div class="pre" @click="pre"></div>
    </div>
</div>

script代码如下

<script>
        new Vue({
            el: "#app",
            data() {
                return {
                    colorArr: ['red', 'yellow', 'skyblue'],
                    count: 1,
                    time: '0.3s'
                }
            },
            methods: {
                next() {
                    this.time='0.3s'
                    this.count++;
                    if (this.count == this.colorArr.length-1) {
                        setTimeout(() => {
                            this.time = '0s';
                            this.count = 1
                        },300)
                    }
                },
                pre() {
                    this.time='0.3s'
                    this.count--
                    if(this.count==0){
                        setTimeout(()=>{
                            this.time='0s'
                            this.count=this.colorArr.length-2;
                        },300)
                    }
                }
            },
            created() {
                this.colorArr.unshift(this.colorArr[this.colorArr.length - 1]);
                this.colorArr.push(this.colorArr[1])
                console.log(this.colorArr);
            }
        })
    </script>

按照正常的无缝轮播图的逻辑，生成时要在数组的头部加上原来的最后一个元素，而尾部加入原来的第一个元素，从而在跳到当前位置的时候，可以关闭transition效果（或者设置0s），进而使得轮播图可以回到原来的位置而不会被发现是滚动回去的。

使用transition-group组件：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./utils/vue.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        .banner-container {
            width: 700px;
            height: 400px;
            margin: auto;
            position: relative;
            /* overflow: hidden; */
        }

        .banner-view {
            width: 700px;
            height: 400px;
            overflow: hidden;
        }

        .banner {
            width: 700px;
            height: 400px;
            background-color: antiquewhite;
            position: relative;
        }

        .bv-enter {
            left: 700px;
        }

        .bv-leave,
        .bv-enter-to {
            left: 0;
        }

        .bv-enter-active,
        .bv-leave-active {
            transition: all 1s linear;
        }

        .bv-leave-to {
            left: -700px;
        }
        .bc-enter {
            left: -700px;
        }

        .bc-leave,
        .bc-enter-to {
            left: 0;
        }

        .bc-enter-active,
        .bc-leave-active {
            transition: all 1s linear;
        }

        .bc-leave-to {
            left: 700px;
        }

        .banner li {
            width: 700px;
            height: 400px;
            position: absolute;
            top: 0;
        }

        .left {
            width: 50px;
            height: 50px;
            position: absolute;
            top: 50%;
            left: -70px;
            background-color: #000;
        }
        

        .right {
            width: 50px;
            height: 50px;
            position: absolute;
            top: 50%;
            right: -70px;
            background-color: #000;
        }



        .q-enter,
        .q-leave-to {
            opacity: 0;
        }

        .q-enter-active,
        .q-leave-active {
            transition: 0.5s;
        }

        .q-enter-to,
        .q-leave {
            opacity: 1;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="banner-container" name="k">

            <div class="banner-view">
                <transition-group :name=names class="banner" tag="ul">
                    <li v-for="(item,index) in colorArr" :style="{'background-color':item}" :key="item"
                        v-show="index==count">{{item}}</li>
                </transition-group>
            </div>

            <div class="left" @click="pre">

            </div>
            <div class="right" @click="next">

            </div>
        </div>

        <button @click="show=!show">切换</button>
        <transition name="q">
            <p v-if="show" style="background-color: yellow;">7777</p>
        </transition>
    </div>

    <script>
        new Vue({
            el: "#app",
            data() {
                return {
                    count: 0,
                    show: false,
                    colorArr: ['red', 'yellow', 'skyblue'],
                    names:""
                }
            },
            methods: {
                next() {
                    this.names='bv'
                    this.count++;
                    if (this.count == 3) {
                        this.count = 0
                    }
                },
                pre() {
                    this.names='bc'
                    this.count--;
                    if (this.count == -1) {
                        this.count = 2
                    }
                }
            }
        })
    </script>
</body>

</html>

通过transition-group组件中的特殊css，v-enter,v-enter-active,v-enter-to,v-leave,v-leave-active,v-leave来控制轮播图的无缝滚动，需要注意的是我们通过左右两个按钮来控制轮播图的左右两个切换效果（通过改变name值），这种方法首先得了解vue的列表过度，如果有不理解的，随时联系我。