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. 面试题：Nginx负载均衡的算法怎么实现的？为什么要做动静分离？

    面试题 Nginx负载均衡的算法怎么实现的?Nginx 有哪些负载均衡策略?Nginx为什么要做动静分离? 面试官心理剖析 主要是看应聘人员对Nginx的基本原理是否熟悉,需要应聘人员能够根据实际业务 ...

  2. 怎样使用haskell编写应用程序

    参考:http://stackoverflow.com/a/9153617 http://www.haskell.org/haskellwiki/How_to_write_a_Haskell_prog ...

  3. PAT 2019-3 7-1 Sexy Primes

    Description: Sexy primes are pairs of primes of the form (p, p+6), so-named since "sex" is ...

  4. Cocos2d-x之Vector<T>

    |   版权声明:本文为博主原创文章,未经博主允许不得转载. Vector<T>是Cocos2d-x 3.x中推出的列表容器,在cocos2d-x3.0之前的版本是Array,因此它所能容 ...

  5. 杯子（glass）

    题目描述 一天,CC买了N个容量可以认为是无限大的瓶子,开始时每个瓶子里有1升水.接着~~CC发现瓶子实在太多了,于是他决定保留不超过K个瓶子.每次他选择两个当前含水量相同的瓶子,把一个瓶子的水全部倒 ...

  6. android SharedPreferences 存储文件

  7. java 调用DB2 SYSPROC.ADMIN_CMD存储过程导出数据

    import java.sql.CallableStatement; import java.sql.Connection; import java.sql.DriverManager; import ...

  8. 【学习总结】Python-3-运算符优先级

    参考:菜鸟教程-Python3运算符 运算符优先级-表 特别注意:逻辑运算符内部的优先级顺序-考点!!!! END

  9. js与html中unicode编码的使用

    js中 // unicode在字符串中使用格式:\u四位编码,一定是四位,否则报错 // 显示 @ 符 console.log(`十六进制 unicode 编码 0x0040 对应的字符是:${'\u ...

  10. shell变量及相关命令