vue的html轮播图

最新推荐文章于 2023-10-04 17:09:17 发布

黄子宸.

最新推荐文章于 2023-10-04 17:09:17 发布

阅读量628

点赞数

分类专栏： vue 文章标签： vue.js

本文链接：https://blog.csdn.net/wo139472/article/details/107289500

版权

vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

vue的html轮播图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       *{
           margin: 0;
           padding: 0;
           list-style: none;

       }
       .app{
            width:1200px;
            margin:50px auto;
            overflow: hidden;
            position: relative;
       }
       ul{
           width:6000px;
       }
       li{
           position: absolute;
           display:inline-block;
       }
       .auto-img{
           display:block;
           width:100%;
       }
       //进入动画的第一帧,也就是开始状态
       .fade-enter{
           transform: translateX(1200px);
       }
       //进入动画和离开动画的整个过程状态
       .fade-enter-active,.fade-leave-active{
           transition : all 0.5s linear;
       }
       进入动画的最后一帧
       .fade-enter-to{
           transform: translateX(0);
       }
       离开动画的第一帧,也就是结束状态
       .fade-leave{
           transform: translateX(0);
       }
       离开动画的最后一帧
       .fade-leave-to{
           transform: translateX(-1200px);
       }
    </style>
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <div class="app">
        <transition-group name="fade" tag="ul">
        //循环加显示与隐藏判断
            <li v-for="(img,i) in imgs" :key="i" v-show="i === index">
                <img :src="img" >
            </li>
        </transition-group>
    </div>

    <script>
       new Vue({
           el:".app",
           data:{
               imgs:[
                   "./images/banner01.jpg",
                   "./images/banner02.jpg",
                   "./images/banner03.jpg",
                   "./images/banner04.jpg",
               ],
               index:0,
           },
           //元素渲染完成再操作,使用定时器使下标轮加
           mounted(){
               this.timer=setInterval(()=>{
                   this.index++;
                   if(this.index > this.imgs.length-1){
                        this.index = 0;
                   }
               },1000)
           },
           //在销毁前清除定时器
           beforeDestroy(){
               clearInterval(this.timer)
           }
       })
      
      
    </script>
   
</body>
</html>

黄子宸.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue的html轮播图

vue的html轮播图<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{
复制链接

扫一扫