vue中使用el-carousel组件实现图片轮播效果

Bertha 。 2021-07-25 15:52 2237阅读 0赞

图片地址：

![20200709152232179.png][]

代码实现：

<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="item.src" style="height:100%;width:100%;" alt="图片丢失了" :title="item.title" />
          </el-carousel-item>
        </el-carousel>
      </div>
    </template>
    
    <script>
    export default {
      components: {},
      data() {
        return {
          imgList: [
            {
              name: "lj",
              src: require("@/assets/lj.png"),
              title: "这是lj.png"
            },
            {
              name: "logo",
              src: require("@/assets/logo.png"),
              title: "这是logo.png"
            },
            {
              name: "bg",
              src: require("@/assets/bg.png"),
              title: "这是bg.png"
            },
            {
              name: "sadmas",
              src: require("@/assets/sadmas.png"),
              title: "这是sadmas.png"
            }
          ]
        };
      },
      created() {},
      mounted() {},
      computed: {},
      methods: {}
    };
    </script>
    
    <style lang="scss">
    </style>

效果图：

![20200709152058991.gif][]

[20200709152232179.png]: /images/20210725/94ff6394171f47cc8055b1e2020f2ed7.png
[20200709152058991.gif]: /images/20210725/251baa6319404d3091171412f378c86a.png

发表评论取消回复

表情：

评论列表（有 0 条评论，2237人围观）

还没有评论，来说两句吧...

相关阅读

相关 MUI实现图片轮播效果

引言图片轮播效果大多数会在出现在商品的详情页或应用首页，它可以用来展示商品详情，也可以用来展示广告信息，活动信息等，所以平时练习一下图片轮播效果的实现还是很有必...

比眉伴天荒/ 2024年04月17日 16:02/ 0 赞/ 76 阅读

相关 vue 实现无限轮播_vue实现一个轮播效果

template lang="html"> 上一项下一项 1. data()\{return\{ cur:0, banners: \[\{src:

我就是我/ 2022年11月05日 15:58/ 0 赞/ 284 阅读

相关 jquery实现简单图片轮播效果

[下载地址][Link 1]jquery实现简单图片轮播效果，按钮控制上下图片翻转效果。 ![1631561661.png][] dd: [Link 1]: https

柔情只为你懂/ 2022年09月11日 11:10/ 0 赞/ 291 阅读

相关原生javascript实现图片轮播效果

最近学习javascript实现动画效果，就用原生的javascript代码实现了图片轮播的效果，供大家参考学习。 1.首先设置图片轮播的地方（id=ban

淡淡的烟草味﹌/ 2022年08月23日 05:43/ 0 赞/ 224 阅读

相关 vue中实现简单轮播效果

html： <div class="cate-main"> <div class="carousel-contain"> <

r囧r小猫/ 2022年05月22日 08:38/ 0 赞/ 243 阅读

相关 VUE中实现MUI轮播图效果

1、配置`App.vue`文件，通过`<router-view></router-view>`加载轮播图页面 <template> <div class=

我不是女神ヾ/ 2022年02月03日 06:59/ 0 赞/ 345 阅读

相关 Javascript实现图片轮播效果。

用js做一个简单的图片轮播效果。思路如下：用JavaScript来控制轮播的图片的样式（margin-left）。用计时器来控制图片的自动播放。鼠标点击控制图片的翻页。

Love The Way You Lie/ 2022年01月16日 02:51/ 0 赞/ 505 阅读

相关图片利用swiper插件实现轮播效果

一般当要使图片自适应屏幕大小变换时候，我们都要给每一个图片设置100%宽高。在图片的父级的div里写上固定的宽高，防止溢出。那么轮播是写在哪一部分呢？答案就是在父级div里

我就是我/ 2021年11月22日 07:26/ 0 赞/ 498 阅读

相关 HTML中图片轮播效果

这是一段简单的Html网页中嵌入的图片轮回播放的js源代码，为增添Html一点效果：代码： <!doctype html> <html> <he

左手的ㄟ右手/ 2021年10月24日 00:31/ 0 赞/ 400 阅读

相关 vue中使用el-carousel组件实现图片轮播效果

图片地址： ![20200709152232179.png][] 代码实现：  <template> <div>

Bertha 。/ 2021年07月25日 15:52/ 0 赞/ 2238 阅读