vue实现轮播效果

效果如下：（不好意思，图有点大；）

功能：点击左侧图片，右侧出现相应的图片；同时左侧边框变颜色。

代码如下：（也可以直接下载文件）

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <title>test</title>

  <script src="vue.js"></script>

</head>

<body>

  <div id="app">

    <!-- 左侧img图片 -->

    <div class="leftlList ">

      <div v-for="(leftImg,index) in leftImgs" :key = "index">

        <label :key="index + 'A'">{{ index + 1 }}</label>

        <div @click="clickImg(index)" :key="index + 'B'" class="img" :class="[leftIndex == index?'listImgActived': '']">

          <img :src="leftImg.url">

          <!-- 11111 -->

        </div>

      </div>

    </div>

    <!-- 分割线 -->

    <div class="string"></div>

    <!-- 中间展示的图片 -->

    <div class="centerImg" v-for="(leftImg,index) in leftImgs" :key="index + 'C'">

      <img :src="leftImg.url" v-show="index == leftIndex">

    </div>

  </div>

  <script>

    new Vue({

      el: '#app',

      data: {

        leftIndex: 0,

        leftImgs: [{

            url: 'src/assets/a.jpg'

          },

          {

            url: 'src/assets/b.jpg'

          },

          {

            url: 'src/assets/c.jpg'

          },

          {

            url: 'src/assets/d.jpg'

          }

        ]

      },

      methods: {

        clickImg(index) {

          this.leftIndex = index;

        }

      }

    });

  </script>

  <style>

    body {

      padding: 0;

      margin: 0

    }

    #app {

      position: absolute;

      background-color: black;

      width: 100%;

      height: 100%;

    }

    .leftlList {

      color: white;

      position: absolute;

      margin-top: 40px;

      margin-left: 40px;

      width: 190px;

      height: calc(100% - 80px);

    }

    .leftlList div .img {

      display: inline-block;

      margin: 16px 14px;

      text-align: center;

      vertical-align: middle;

      /* width: 130px;

      height: 130px;

      line-height: 130px; */

    }

    .leftlList div .img img {

      width: 130px;

      height: 130px;

      line-height: 130px;

    }

    #app .string {

      position: absolute;

      margin-left: 220px;

      margin-top: 40px;

      height: calc(100% - 80px);

      border: 2px solid pink;

      display: inline-block;

    }

    .centerImg {

      position: absolute;

      width: calc(100% - 430px);

      margin-left: 300px;

      margin-top: 70px;

      text-align: center;

      vertical-align: middle;

    }

    .listImgActived {

      border: 2px solid aqua;

    }

  </style>

</body>

</html>

如果左侧不是图片，而是文字的话；

可以把

 /* width: 130px;

      height: 130px;

      line-height: 130px; */
这三行代码取消。

另外，如果出现下面这样的报错的话：

是因为key的值重复了。所以，只需要把key的值改下就可以了：

例：

<div v-for="(leftlist, index) in leftlists" :key="index"></div>

<div v-for="(leftlist, index) in leftlists2" :key="'I'+ index"></div>

<div v-for="(leftlist, index) in leftlists3" :key="'II',+ index"></div>

这里例子中的 I,II 字符可以替换成你自己定义的任意字符，只是为了保证key的唯一性

如果图片加载不出来，尝试一下

url: require("../../assets/ckBG.jpg")
 

vue实现轮播效果的更多相关文章

  1. vue项目全局引入vue-awesome-swiper插件做出轮播效果

    在安装了vue的前提下,打开命令行窗口,输入vue init webpack swiper-test,创建一个vue项目且名为swiper-test(创建速度可能会有点慢,耐心等),博文讲完后,源码托 ...

  2. Vue如何使用vue-awesome-swiper实现轮播效果

    在Vue项目中如何实现轮播图的效果呢,在传统项目中第一个想到的一般都是swiper插件,代码简单好用.一开始我也是直接npm安装swiper然后照着之前的传统写法写,然而却没有效果,只会显示图片但没有 ...

  3. 在 vue 中用 transition 实现轮播效果

    概述 今天我接到一个需求:轮播效果.本来我是打算使用 Swiper 实现的,但是想起来貌似 transition 也能实现.于是就试了下,真的可以,还挺简单的,于是就记录下来,供以后开发时参考,相信对 ...

  4. jQuery个性化图片轮播效果

    jQuery个性化图片轮播效果 购物产品展示:图片轮播器<效果如下所示> 思路说明: 每隔一段时间,实现图片的自动切换及选项卡选中效果,鼠标划入图片动画停止,划出或离开动画开始 两个区域: ...

  5. Android使用ViewPager实现左右循环滑动及轮播效果

    边界的时候会看到一个不能翻页的动画,可能影响用户体验.此外,某些区域性的ViewPager(例如展示广告或者公告之类的ViewPager),可能需要自动轮播的效果,即用户在不用滑动的情况下就能够看到其 ...

  6. JQuery实现图片轮播效果源码

    ======================整体结构======================== <div class="banner"> <ul class ...

  7. 基于css3的轮播效果

    花了一上午来调整页面在ie10上的显示问题,sass编译生成的css文件在ie内核下一直不能正确加载,果然兼容性的问题还需要好好研究.转入正题,用css3实现轮播效果主要是基于css3的framewo ...

  8. 调用MyFocus库，简单实现二十几种轮播效果

    一.首先点击这里下载myFocus库文件,标准文件库就行了,很小仅仅1.4M. myFocus库有以下的好处: a . 文件小巧却高效强大,能够实现二十几种轮播的效果. b . 极其简单的使用,只需要 ...

  9. html轮播效果的实现

    要实现如下图的效果 点击可以选择图片:不点击的时候自动轮播:并且点击完后再次自动轮播. 思路:如同在房子里透过窗子看路过的火车一样,窗子是不动的,但火车是陆续经过窗子的,所以透过窗子可以看到依次看完所 ...

随机推荐

  1. 关于Java中编码集的有趣现象和解释

    这是在整理另一篇博客的时候发现的一个有趣的现象,是这样描述的:我们都知道Java默认使用的是UniCode编码集,我们也知道char类型占用两个字节.所以奇怪的现象又发生了(见代码): @Test p ...

  2. 配送单MYSQL ,一点都不机智

    这是配送单制作,后面修改了下表 . 写的太乱. 不过也不想去修改了. 放在这里了.反正还能用. 不然就坑爹了. 以后写好一点. 这都是些神马, 太难受了. /* 配送单制作,缺少商品规格,以及库存查询 ...

  3. python赞乎--学习开发

  4. 控制banner内容

    Spring Boot启动的时候默认的banner是spring的字样,看多了觉得挺单调的,Spring Boot为我们提供了自定义banner的功能. 自定义banner只需要在resource下新 ...

  5. USACO 5.5 章节

    Picture 题目大意 IOI 1998 求n (<=5000)个矩形 覆盖的图形 的周长(包括洞), 坐标范围[-10000,10000] 题解 一眼离散化+2维线段树,但仔细一想 空间不太 ...

  6. KMP算法——字符匹配

     暴力匹配: 假设现在我们面临这样一个问题:有一个文本串S,和一个模式串P,现在要查找P在S中的位置,怎么查找呢? 如果用暴力匹配的思路,并假设现在文本串S匹配到 i 位置,模式串P匹配到 j 位置, ...

  7. Qt Creator 中的插件Plugin, 区分说明。。。

    Qt Creator 中可以创建 三中类型的插件Plugin: 1.用的最多的,派生自QGenericPlugin类: 在新建Library,   Plugin类型工程中,新建. 调用使用QPlugi ...

  8. 详解JavaScript数组过滤相同元素的5种方法

    详解JavaScript数组过滤相同元素的5种方法:https://www.jb51.net/article/114490.htm

  9. ASP.NET Core 2.1 JWT Token 使用 （二） - 简书

    原文:ASP.NET Core 2.1 JWT Token 使用 (二) - 简书 接上文,https://www.jianshu.com/p/c5f9ea3b4b65 ASP.NET Core 2. ...

  10. 五、bootstrap-Table Treegrid

    一.bootstrap-Table Treegrid <!DOCTYPE HTML> <html lang="zh-cn"> <head> &l ...