vue 轮播图 animation 动态效果

最新推荐文章于 2024-05-20 11:56:24 发布
最新推荐文章于 2024-05-20 11:56:24 发布
阅读量1.0k 收藏
点赞数 2
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/divids_yyds/article/details/127320070
版权

轮播图是前端常见的 交互效果；很多移动端的组件库都会存在轮播图这样的组件 

前段时间闲暇的时候 做了一个轮播时的动画效果 简单分享一下 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态轮播图</title>
    <script src="https://cdn.suoluomei.com/common/js2.0/vue/v2.5.16/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://cdn.suoluomei.com/common/js2.0/element-ui/2.12/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://cdn.suoluomei.com/common/js2.0/element-ui/2.12/lib/theme-chalk/index.js"></script>

</head>
<style>
    .shakeend {}
    .shake {
        animation: shake 0.5s;
        animation-iteration-count: 1;
    }
    .box {
        width: 600px;
        height: 300px;
        padding-top: 20px;
        position: relative;
        /* border: 1px solid #333; */
        right: 10%;
        margin: 0 auto;
    }
    .image{
        height: 190px;
        width: 140px;
        border: 1px solid #333;
        border-radius: 20px;
        /* transform: translate(-50% 0); */
    }
    .divs {
        height: 100%;
        border: 1px solid #333;
        border-radius: 20px;
    }
    .boximage0 {
        position: absolute;
        top: 20px;
        left: 10%;
        width: 140px;
        height: 190px;
        z-index: 1;
        animation: boximage0 0.5s;
        animation-iteration-count: 1;
    }
    .boximage1 {
        position: absolute;
        top: 20px;
        left: 29%;
        width: 150px;
        height: 200px;
        z-index: 2;
        animation: boximage1 0.5s;
        animation-iteration-count: 1;
    }
    .boximage2 {
        position: absolute;
        top: 20px;
        left: 50%;
        width: 160px;
        height: 210px;
        z-index: 3;
        animation: boximage2 0.5s;
        animation-iteration-count: 1;
    }
    .boximage3 {
        position: absolute;
        top: 20px;
        left: 72%;
        width: 150px;
        height: 200px;
        z-index: 2;
        animation: boximage3 0.5s;
        animation-iteration-count: 1;
    }
    .boximage4 {
        position: absolute;
        top: 20px;
        left: 92%;
        width: 140px;
        height: 190px;
        z-index: 1;
        animation: boximage4 0.5s;
        animation-iteration-count: 1;
    }
    li {
        list-style: none;
    }
    .color0 {
        background-color: rgb(115, 209, 204);
    }
    .color1 {
        background-color: rgb(182, 180, 55);
    }
    .color2 {
        background-color: rgb(155, 30, 103);
    }
    .color3 {
        background-color: rgb(34, 180, 90);
    }
    .color4 {
        background-color: rgb(73, 138, 212);
    }
    @keyframes boximage0 {
        0% { left: 92%; width: 140px; height: 190px; z-index: 1;}
        50% { width: 130px; height: 180px;}
        100% { left: 10%; width: 140px; height: 190px; z-index: 1;}
    }
    @keyframes boximage1 {
        0% { left: 10%; width: 140px; height: 190px; z-index: 1;}
        100% { left: 29%;  width: 150px; height: 200px; z-index: 2;}
    }
    @keyframes boximage2 {
        0% { left: 29%; width: 150px; height: 200px; z-index: 2; transform: rotatey(0deg);}
        100% { left: 50%; width: 160px; height: 210px; z-index: 3; transform: rotatey(180deg);}
    }
    @keyframes boximage3 {
        0% { left: 50%; width: 160px; height: 210px; z-index: 3;}
        100% { left: 72%; width: 150px; height: 200px; z-index: 2;}
    }
    @keyframes boximage4{
        0% { left: 72%; width: 150px; height: 200px; z-index: 2;}
        100% { left: 92%; width: 140px; height: 190px; z-index: 1;}
    }
</style>
<body>
<div id="Vue" style="width: 100%;" ref="container">
    <div class="box">
        <ul>
            <li id="liClass" v-for="(item, index) in dataList" :key="index" :class="item.calss">
                <div :class="`color${index} divs`">1</div>
            </li>
        </ul>
    </div>
</div>
</body>
<script>
    new Vue({
        el:"#Vue",
        data () {
            return {
                dataList: [
                    { calss: 'image boximage0' },
                    { calss: 'image boximage1' },
                    { calss: 'image boximage2' },
                    { calss: 'image boximage3' },
                    { calss: 'image boximage4' },
                ],
            }
        },
        mounted () {
            this.fn()
        },
        methods:{
            fn() {
                setInterval(() => {
                    this.times()
                }, 3000);
            },
            times() {
                const aaa = this.dataList.shift()
                this.dataList.push(aaa)
            }
        }
    })
</script>

</html>

代码主要以css 为主 引入了 element-ui 组件库 还有 vue的框架 复制代码 到一个空白的html文件中 即可看到效果 

越家二少
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
vue实践动态轮播图组件
云端-公子清
07-04 591
vue实践动态轮播图组件 数据更改【=>dom diff -> 把虚拟dom传化为真实的dom ->$nextTick(在回调函数后真实) -> 告知浏览器绘制】 分割成3个件,BannerButton,BannerPagination,BannerPlugin 注意：组件命名采用驼峰式写法 解析关键词作用：template：每一个组件都有一个template，没有template也必须有rand，最起码要指定出我们的视图来 data>return : 视图有了，就有数据，
vue 左右循环滑动_Vue实现一种简单的无限循环滚动动画的示例
weixin_39525097的博客
01-12 2237
本文主要介绍了Vue实现一种简单的无限循环滚动动画的示例，分享给大家，具体如下：先看实现效果：这种类似轮播的效果，通常可以使用轮播的方案解决，只不过相对于我要分享的方案来说，轮播实现还是要复杂些的。Vue提供了一种过渡动画transition-group，这里我便是利用的这个效果// templatev-for="v in items":key="v.ix"class="item list-com...
【图片轮播】Vue如何实现移动端图片轮播效果，支持左右滑动（附图文及代码）
赏樱看雪撸代码
06-15 8873
vue实现移动端图片轮播，移动端相册制作，vant3实现图片轮播效果，swipe轮播实现过程，swipe轮播组件实现照片轮播，vant3中swipe轮播组件应用。
基于Vue3的Web端自定义轮播图动画效果（完整版保姆级教程，附源码）
最新发布
weixin_52231116的博客
05-20 1826
本文主要基于vue3制作web端自定义轮播图，以及添加相应的动画（完整版保姆级教程，附源码）
Element(饿了么) Vue组件库内置过渡动画主要源代码
热门推荐
似水流年的博客
12-20 2万+
我们在开发一些Vue项目的时候经常会引入Element这个组件库，简洁美观又好用。有时候我们自己会根据项目的需要自己写一些公共的组件（造轮子），有很多组件都会用到CSS的过渡、动画效果使得组件的展示更加美观、平滑。这时候可以参考Element组件的过渡动画源码。 动画效果演示可以在Element组件库的内置动画过渡找到： fade 淡入淡出 在Vue组件中这种特效的使用是借助于tran...
Vue实现轮播图效果
cos7986的博客
05-13 8368
Vue实现的轮播图，初始化后自动轮播，鼠标移入停止轮播，点击图片跳转链接，可指定宽高，左右切换方向可控，静态效果如下： 使用Vue的transition-group来实现，布局如下： <div class="carousel_swipe" v-bind:id="'carousel_swipe'+id" @mouseenter.stop="handleStop" @mouseleav...
vue2+百度离线地图实现多车辆行驶动态轨迹
weixin_39277183的博客
12-02 3860
有个缺点就是如果数据量庞大会导致浏览器性能消耗严重，因为这里使用了定时器实现，应该有更好的办法实现，完成改功能效果需要连个接口，①初始化坐标点接口，②增量坐标点接口。实现多车辆实时轨迹监控，每个10秒监测一次接口，进行动态追加。vue2+百度离线地图实现行驶车辆动态轨迹。
Vue 过渡实现轮播图效果
08-31
Vue 的过渡系统是其强大特性之一，它允许开发者在DOM元素插入、更新或移除时添加动态效果。在本文中，我们将深入探讨如何使用Vue过渡系统来实现轮播图效果。 首先，Vue的过渡效果是通过在元素上设置`transition`...
vue轮播图效果.zip
07-11
基于vue的轮播图效果
基于vue.js实现图片轮播效果
10-20
主要为大家详细介绍了基于vue.js实现图片轮播效果，vue如何实现轮播图效果,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue轮播图大屏，静态网页轮播图，html轮播图
02-27
vue轮播图大屏源码 代码简介：vue+element+html静态网页大屏轮播图，可设置轮播图间隔时间，源码简洁明了，同时增加访问页面初始化进入的loading加载的效果，通过element集成，由于element框架的优越性，可非常灵活...
vue.js实现简单轮播图效果
01-21
学习了vue.js也有一段时间了，做了个小demo来熟悉一下，很常见的demo，——-轮播图，没学vue之前的轮播图用JavaScript或者jquery都非常简单，发现用vue来写也挺有意思的。说下简单的思路，图片的轮播用v-if或者v-...
Vue图片切换过渡设计
weixin_44786238的博客
07-12 3589
Vue图片切换过渡效果设计 Time：2021-3-26 前言 不要拦着我！我要先大吹一波Vue，永远的神！Vue下，不用jQuery！轻松一点代码和样式的设计就搞定了图片自然过渡的切换！是的，没有使用vegas.js，没有使用backstretch.js，没有任何jQuery插件！咳咳，总之就是非常厉害！ 在搭建个人博客的路上，为了搞这个图片自然过渡，可是烦扰了我三天之多啊，终于，在不断的探索与尝试之下，找到了最优解(应该是)。 Author：雾雨霜星 欢迎来我的网站学习： https://www.shu
vue实现简单轮播图
qq_42312396的博客
03-15 2万+
做了一个轮播图，可以自动切换，鼠标放上去后停止，左右切换是用element ui加上去的，箭头间距不一样有点难受，之后再吧。记录一下。 下面是html的图和按钮部分 v-for中必须要写index作为:key的值。button应该卸载img后面，写在前面的会被img遮住，加个z-index:1，调高图层就可以了。 <div v-for="(img_url, index) in img_src" :key="index" v-s
vue中transition标签实现轮播图及ScreenToGif动图生成器
weixin_44198018的博客
04-07 1296
页面中想插入一个轮播图，本来想直接找一个现成，结果发现大佬们的代码都特别复杂，而且大部分都是直接用的better-scroll,放到我的页面上效果都不是很好，所以没有办法，本菜鸡就直接写了一个小白也能看懂可以直接调用的轮播图啦~ 首先说一下实现的功能：图片的无缝轮播，鼠标移入停止，移出继续以及底部的导航条 效果： 好啦废话不多说直接上代码啦： <template> <div i...
vue 实现无限轮播_Vue 实现无缝轮播
weixin_42187923的博客
12-29 3276
很多网站都会有轮播图的需求，而简单的轮播图实现通常会在展现完最后一个子项后中止轮播，或者者跳回到第一个子项重复轮播过程，这样的交互效果往往是存在断层的。接下来详情如何实现一个无缝的轮播图，达到这样的效果：预览地址：https://jsfiddle.net/JunreyCen/qxogapws/核心思想其实非常简单：当轮播到边界子项(Item 3)，并继续进行横移时，把即将要展现的子项(Item 1...
触摸滑动插件Swiper的使用
m0_63498341的博客
04-06 470
触摸滑动插件Swiper的使用
vue轮播图淡入淡出效果
12-08
以下是一个使用Vue实现淡入淡出效果的轮播图例子： ```html template> <div class="slider"> <transition-group name="fade" tag="div"> <div :key="currentIndex"> <img :src="images[currentIndex]" alt=""> </div> </transition-group> </div> </template> <script> export default { data() { return { currentIndex: 0, images: [ 'https://picsum.photos/id/237/200/300', 'https://picsum.photos/id/238/200/300', 'https://picsum.photos/id/239/200/300' ] } }, mounted() { setInterval(() => { this.currentIndex = (this.currentIndex + 1) % this.images.length }, 2000) } } </script> <style> .fade-enter-active, .fade-leave-active { transition: opacity .5s; } .fade-enter, .fade-leave-to { opacity: 0; } </style> ``` 在这个例子中，我们使用了Vue的`<transition-group>`组件来实现淡入淡出效果。`<transition-group>`组件会在子元素发生变化时自动应用过渡效果。我们将要轮播的图片放在一个`<div>`元素中，并将其绑定到`<transition-group>`组件上。在CSS中，我们定义了`.fade-enter-active`和`.fade-leave-active`类来设置过渡效果，同时使用`.fade-enter`和`.fade-leave-to`类来设置元素的初始和结束状态。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值