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. [题解]Yet Another Subarray Problem-DP 、思维（codeforces 1197D）

    题目链接:https://codeforces.com/problemset/problem/1197/D 题意: 给你一个序列,求一个子序列 a[l]~a[r] 使得该子序列的 sum(l,r)-k ...

  2. Python3函数中特殊形参的使用：*、*args、**kwargs

    Python3函数中特殊形参的使用:*.*args.**kwargs ==用法1:不定长参数== 当函数需要的参数数量不确定的时候,可以使用*args 和 **kwargs , 所有的位置参数保存在* ...

  3. 微信小程序实战篇-分类页面制作

    https://blog.csdn.net/u012927188/article/details/73650264

  4. Hibernate4教程六：性能提升和二级缓存

    抓取策略(fetching strategy)是指:当应用程序需要在(Hibernate实体对象图的)关联关系间进行导航的时候,Hibernate如何获取关联对象的策略.抓取策略可以在O/R映射的元数 ...

  5. shell选项和参数

  6. 个人公众号服务端开发Demo

    公众号出来很久了,也可以个人申请.知道公众号的服务端开发其实很简单,接口调用封装,数据存取,不外如是. 人一旦懒了,真的是 “无可救药” 了...现简单描述晚到的公众号HelloWorld 思路 公众 ...

  7. nodejs包高效升级插件npm-check-updates

    一.安装 npm install -g npm-check-updates 或 cnpm install -g npm-check-updates 二.使用 ncu crypto ^0.0.3 → ^ ...

  8. Tmux 中开启鼠标选择与复制

    在 tmux.conf 中加入下列设置(tmux 2.1 之前的版本): set -g mode-mouse on set -g mouse-resize-pane on set -g mouse-s ...

  9. node快速起web服务器

    首选,安装http-server模块 npm install http-server -g 在需要打开的静态页面的目录下,开启服务即可 http-server

  10. Delphi 访问https /SSL、OpenSSL

    访问 Web 网站,最简单用法直接使用 TIdHTTP 控件: 例如:AA := IdHTTP1.Get('www.baidu.com.'); 访问 https 的网站,需要 SSL 库. 在 Win ...