用vue写一个简单轮播图效果

最新推荐文章于 2024-05-20 11:56:24 发布
最新推荐文章于 2024-05-20 11:56:24 发布
阅读量2.3k 收藏 5
点赞数 4
分类专栏： vue-cli3 文章标签： javascript vue-cli3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_59120187/article/details/120199840
版权
轮播图在不同的移动设备随处可见，可以增添页面几分美观等优点，接下来用渐进式框架vue来实现轮播图效果
一、原理：
创建数组backgroundImg作为轮播图图片路径，声明变量timer为时间，swing=0为默认的第一张图片。通过定时器或点击来切换图片效果。
二、变量：
      swing: 0,
      timer: null,
      //背景图
       backgroundImg: [
        "background:url(https://imgessl/commendpic/20210831/20210831233709628572.jpg) no-repeat center top;",
        "background:url(https://imgessl/commendpic/20200407/20200407114244160948.jpg) no-repeat center top;",
        "background:url(https://imgessl/commendpic/20210831/20210831233709628572.jpg)no-repeat center top; ",

      ],

三、 在计算属性computed中声明两个方法proIndex和nextIndex，来做加减档操作，

   //computed
  computed: {
   
    //上一张
    proIndex() {
   
      if (this.swing == 0) {
   
        return this.backgroundImg.length - 1;
      } else {
   
        return this.swing - 1
最低0.47元/天 解锁文章
Coocke
关注
  • 4
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
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实现轮播图详解
蓑笠翁
10-04 1万+
vue实现轮播图效果，vant使用轮播图效果，实现图片轮播效果详解。
基于Vue3的Web端自定义轮播图动画效果（完整版保姆级教程，附源码）
最新发布
weixin_52231116的博客
05-20 2226
本文主要基于vue3制作web端自定义轮播图，以及添加相应的动画（完整版保姆级教程，附源码）
vue 轮播图效果
ximingx
11-12 2687
用自己的想法 , 完成一个轮播图 演示 主要功能: 自动照片无限循环 底部按钮点击切换 左右按钮点击切换 具体的方法看代码中的注释,很清楚 <template> <div id="swiper"> <div id="box"> <!-- 设定一次只显示一张图片 --> <img :src="imgSrc[currentIndex]" alt="img"> </div> &lt
vue实现轮播图(每隔两秒自动翻页、翻到末页自动返回首页、点击按钮左右翻页)
zag666的博客
04-19 6637
很久之前写过一篇用js按钮实现切换图片效果，现在用vue实现一个轮播图，可以实现点击按钮左右翻页、每隔两秒自动翻页、翻到最后一页自动返回第一页。 实现结果如下： 实现代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>图片切换</title> <link rel="stylesheet" href="./css/inde
Swiper轮播图在Vue框架中的运用
吕小威的博客
06-30 4178
要在Vue中运用Swiper需要下载Swiper插件 在命令行cmd（可以cd 根目录）输入 npm install vue-awesome-swiper --save 下载成功后，查看package.json中是否存在 在mian.js中全局引入 import VueAwesomeSwiper from 'vue-awesome-swiper' // 同时必须引入css样式文件 import 'swiper/css/swiper.css' // 挂载到vue全局上 或在需要使用的界面引入 re
vue.js实现简单轮播图效果
01-21
学习了vue.js也有一段时间了，做了个小demo来熟悉一下，很常见的demo，——-轮播图，没学vue之前的轮播图用JavaScript或者jquery都非常简单，发现用vue来写也挺有意思的。说下简单的思路，图片的轮播用v-if或者v-...
基于vue2.0实现简单轮播图
11-27
如图所示，实现的就是一个间隔2.5s自动向左切换下一张的轮播图，同时鼠标移入停止轮播，移出回复轮播； 而下方按钮会根据当前图片自动变红且可以手动控制当前图片。 思路： 整个demo分为轮播图片和控制span两个部分...
Vue封装Swiper实现图片轮播效果
11-26
最近学习Vue.js，就针对Swiper进行封装，实现一个简单的图片轮播组件。 一、Swiper 在实现封装之前，先介绍一下Swiper。 Swiper是纯Javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。 Swiper能实现...
【图片轮播】Vue如何实现移动端图片轮播效果，支持左右滑动（附图文及代码）
赏樱看雪撸代码
06-15 9002
vue实现移动端图片轮播，移动端相册制作，vant3实现图片轮播效果，swipe轮播实现过程，swipe轮播组件实现照片轮播，vant3中swipe轮播组件应用。
vue中使用el-carousel组件实现图片轮播效果
~~
07-09 2万+
代码实现： <!--home--> <template> <div> <el-carousel trigger="click" height="250px" :interval="3000" arrow="always" style="width:800px"> <el-carousel-item v-for="item in imgList" :key="item.name"> <img :src
轮播图，用vue来写一个简单的轮播图
m0_63622279的博客
07-15 686
写的很简单，就是一个小练习，哈哈哈，下面的几张图分别是轮播图的第一张，中间图，最后一张的效果图。使用了vue 中的属性绑定 v-bind ,v-show 以及 事件监听 v-on 指令。1.vue实例中声明一个data属性imgArr，用于存放每张轮播图的地址，4.最后通过v-show判断一下第一张和最后一张就不再显示左右箭头即可。2.同时定义一个默认起始索引index=0,3.然后给两边的箭头监听点击事件，// 图片url 数组。
使用Vue写一个图片轮播组件
热门推荐
记录美好生活
03-23 3万+
在制作这个组件之前，笔者google了不少关于轮播的文章，发现实现一个轮播的思路虽然各有不同，但是大的逻辑其实差不多，本文主要依据慕课网上焦点轮播图特效这节课，不过慕课网主要用原生JS写，而笔者则用Vue进行了重构，并且进行了一点修改。完成后的组件效果图如下： 一、理清思路，理解需求和原理 1. 要写一个什么样的轮播？ 在点击右侧箭头时，图片向左滑动到下一张；点击左侧箭头时，...
超简单的基于vue的轮播图实现
付纵横
07-06 2603
今天要做一个轮播图,网上找了一圈都不满意,自己写了个. 效果如下: 图片可自行配置,始终显示5张; 核心代码: <ul v-on:mouseout="move()" v-on:mouseover="stopmove()"> <i @click="left()" class="el-icon-arrow-left"></i> <li :key="index" v-for="index in [0,1,2,3,4,5]">
vue简单轮播图效果
Songlinlin_的博客
11-27 931
html &lt;div class="carousel-wrap" id="carousel"&gt; &lt;transition-group tag="ul" class='slide-ul' name="list"&gt; &lt;li v-for="(list,index) in imgArray" :key
使用Vue实现轮播图
r081r096的博客
02-09 314
【代码】使用Vue实现轮播图。
Vue实现轮播图效果
cos7986的博客
05-13 8373
Vue实现的轮播图，初始化后自动轮播，鼠标移入停止轮播，点击图片跳转链接，可指定宽高，左右切换方向可控，静态效果如下： 使用Vue的transition-group来实现，布局如下： <div class="carousel_swipe" v-bind:id="'carousel_swipe'+id" @mouseenter.stop="handleStop" @mouseleav...
Vue实现轮播图
cuber-lotus的博客
07-15 9596
Vue实现轮播图 先上总代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
Vue实战篇二十七：实现走马灯效果的商品轮播图
我的博客
05-21 3009
我们有时候需要在有限空间内，循环播放同一类型的图片、文字等内容。比如首页轮播图片，商品信息循环播放等，这种效果统称为<kbd>走马灯</kbd>。
用vue写一个层叠轮播图
04-05
以下是一个简单的层叠轮播图实现，使用Vue的transition和v-for指令： HTML： ``` <template> <div class="carousel"> <transition-group name="carousel" tag="div"> <div v-for="(item, index) in items" :key="index" class="carousel-item" :style="{ zIndex: index }"> <img :src="item"> </div> </transition-group> </div> </template> ``` CSS： ``` .carousel { position: relative; width: 100%; height: 400px; } .carousel-item { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.5s ease-in-out; } .carousel-item.active { opacity: 1; } .carousel-enter-active, .carousel-leave-active { transition: opacity 0.5s ease-in-out; } .carousel-enter, .carousel-leave-to { opacity: 0; } ``` JavaScript： ``` <script> export default { data() { return { items: [ 'https://picsum.photos/800/400?random=1', 'https://picsum.photos/800/400?random=2', 'https://picsum.photos/800/400?random=3', 'https://picsum.photos/800/400?random=4', 'https://picsum.photos/800/400?random=5', ], current: 0, }; }, mounted() { setInterval(() => { this.current = (this.current + 1) % this.items.length; }, 3000); }, }; </script> ``` 在这个实现中，我们使用了一个数组来存储轮播图的图片链接。在mounted生命周期钩子中，我们使用setInterval来定时更新current变量，以便实现轮播。然后，我们使用v-for指令来循环渲染轮播图中的每个图片，使用transition-group和transition指令来实现动画效果。在CSS中，我们定义了.carousel-item样式来设置轮播图的位置和透明度，并使用了动画过渡效果。注意，我们使用了一个active类来设置当前轮播图的透明度为1。最后，在JavaScript中，我们将current变量绑定到轮播图上，以便在每个轮播图上使用active类。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值