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. WEB服务端安全---注入攻击

    注入攻击是web领域最为常见的攻击方式,其本质是把用户输入的数据当做代码执行,主要原因是违背了数据与代码分离原则,其发生的两个条件:用户可以控制数据输入:代码拼接了用户输入的数据,把数据当做代码执行了 ...

  2. python使用消息队列RabbitMq（入门）

    windows平台开发和使用 安装 安装Erlang:https://pan.baidu.com/s/1QcZDaI205uaue7mMWh5cSA 安装RabbitMQ:https://pan.ba ...

  3. 洛谷 P1111 修复公路——并查集

    先上一波链接qwq https://www.luogu.org/problem/P1111 这题就是裸的并查集咯qwq 维护一下连通块的数目 数目变为一的时候整个图就连通了 输出此时的答案就okay拉 ...

  4. spring cloud学习--eureka 02

    开启eureka client的注解@EnableDiscoveryClient的功能类DiscoveryClient梳理图 获取server url位于类EndpointUtils的getServi ...

  5. C#log4net的使用

    一,下载log4net.dll,在项目中添加引用 二,在站点根目录添加,配置文件(log4net.xml), <file value="logs/logfile.txt"/& ...

  6. 【学习总结】Python-3-多个变量赋值

    菜鸟教程-Python3-基本数据类型 同时为多个变量赋值的两种格式: 连等:看起来可能错误但事实上Python可以这样的.... 一团变量对应一团值:比较常见又省事的格式 END

  7. 修改bug 提交出错：操作失败: 无法更改关系，因为一个或多个外键属性不可以为 null

    提交出错:操作失败: 无法更改关系,因为一个或多个外键属性不可以为 null.对关系作出更改后,会将相关的外键属性设置为 null 值.如果外键不支持 null 值,则必须定义新的关系,必须向外键属性 ...

  8. Centos7下编译安装php扩展redis5.0.2

    安装环境:centos7 + php 7.2.191. 下载地址:http://pecl.php.net/get/redis-5.0.2.tgz .tgz http://pecl.php.net/ge ...

  9. java web中的get和post（笔记）

    W3CSchool 在客户机和服务器之间进行请求-响应时,两种最常被用到的方法是:GET 和 POST. GET - 从指定的资源请求数据. POST - 向指定的资源提交要被处理的数据 GET 方法 ...

  10. ThinkPHP的MVC模式

    ThinkPHP基于MVC(Model-View-Controller,模型-视图-控制器)模式,并且均支持多层(multi-Layer)设计. 模型(Model)层 默认的模型层由Model类构成, ...