使用vue写一个轮播图，用到vue中提供的transition

最新推荐文章于 2024-03-21 10:38:34 发布

青衣浏阳

最新推荐文章于 2024-03-21 10:38:34 发布

阅读量426

点赞数

文章标签： vue javascript

本文链接：https://blog.csdn.net/m0_49016709/article/details/107163782

版权

transition用法：
元素作为单个元素/组件的过渡效果。
只会把过渡效果应用到其包裹的内容上，而不会额外渲染 DOM 元素，也不会出现在可被检查的组件层级中。

直接上代码：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="UTF-8">
    <title>轮播图</title>
    <style>
        .bottomTip{display: inline-block;vertical-align: top;margin-right: .1rem;margin-left: .1rem;padding-left: 0}
        .bottomTip ol{display: inline-block;padding-left: .4rem;padding-right: .4rem}
        .prev{display: inline-block;vertical-align: top}
        .next{display: inline-block;vertical-align: top}
        .on{color: #ffffff;background-color:rgb(158,9,9)}

        /*CSS3动画*/
        .contentBox{position: relative;width: 90%;max-width: 900px;overflow: hidden;margin: 0 auto}
        .slideBox{height: 55vh;width: 100%}
        .slideBox>img{width: 100%;position: absolute;top: 0;}
        .slide-trans-enter-active{transition: all 3s}
        .slide-trans-enter{transform:translateX(100%)}
        .slide-trans-old-leave-active{transition: all 3s;transform: translateX(-100%)}
    </style>
</head>
<body>
<div id="vueBox">
    <div @mouseover="clearInv" @mouseout="runInv" class="contentBox">
        <div class="slideBox">
            <transition name="slide-trans"><img v-if="isShow" :src="slides[nowIndex].src" alt=""></transition>
            <transition name="slide-trans-old"><img v-if="!isShow" :src="slides[nowIndex].src" alt=""></transition>
        </div>
        <div style="text-align: center">
            <p class="prev" v-on:click="goto(prevIndex)">前一页</p>
            <ul class="bottomTip">
                <ol v-for="(item,index ) in slides" v-on:click="goto(index)" :class="{on:index==nowIndex}">{{index+1}}</ol>
            </ul>
            <p class="next" v-on:click="goto(nextIndex)">后一页</p>
        </div>
    </div>
</div>

<script src="js/vue.min.js"></script>
<script>
    var app=new Vue({
        el: '#vueBox',
        data:{
            slides:[
                {src:'img/12.jpg', href:'', title:''},
                {src:'img/8.jpg', href:'', title:''},
                {src:'img/13.jpg', href:'', title:''},
                {src:'img/9.jpg', href:'', title:''},
            ],
            nowIndex:0,  //当前页数
            isShow:true,
            inv:3500 //轮播图切换时间
        },
        computed : {//计算属性
            prevIndex(){  //监听向前的动作，做出前移
                //this.nowIndex==0 说明当前是第一页，在往前移就是最后一页 
                // slides数组的最后一个元素，返回 this.slides.length-1
                if(this.nowIndex==0){
                    return this.slides.length-1
                }else {
                    return this.nowIndex-1
                }
            },
            nextIndex(){ //监听向后的动作，做出后移
                //同样如果是最后的话在后移，就到数组第一个元素了
                if(this.nowIndex==this.slides.length-1){
                    return 0
                }else {
                    return this.nowIndex+1
                }
            }
        },
        methods:{
            back () {
                this.$router.push('/')
            },
            goto(index){
                this.isShow=false;
                setTimeout(()=>{
                    this.isShow=true;
                    this.nowIndex=index;
                },200)
            },
            runInv(){  //设置幻灯片的计时器函数
                this.invId= setInterval(()=>{
                    this.goto(this.nextIndex)
                },this.inv)
            },
            clearInv(){  //停止轮播
                clearInterval(this.invId)
            }
        },
        mounted(){  //再生成后调用计时器函数，
            this.runInv()
        }
    });
</script>
</body>
</html>

computed 计算属性是为了监听前移后移动作，然后让当前页数对应的前移后移。
this.nowIndex==0 说明当前是第一页，在往前移就是最后一页 slides数组的最后一个元素，返回 this.slides.length-1；
@mouseover=“clearInv” ：当鼠标移入的时候，移除计时器，自动轮播停止
@mouseout=“runInv”：当鼠标移出的时候重新启动计时器，继续自动轮播

写在最后：如有疑问或者指正的欢迎留言~

青衣浏阳

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用vue写一个轮播图，用到vue中提供的transition

transition用法：元素作为单个元素/组件的过渡效果。只会把过渡效果应用到其包裹的内容上，而不会额外渲染 DOM 元素，也不会出现在可被检查的组件层级中。直接上代码：<!DOCTYPE html><html><head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta charset="UTF-8"> &
复制链接

扫一扫