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. "New page after" by code

    Hi. There is a method for starting of the new page in the EngineV2: Engine.NewPage(); You can call i ...

  2. Java空对象模式

    在“空对象”模式中,空对象将替换NULL对象实例的检查.而不是检查一个空值,Null对象反映一个无关的关系(即什么也不做). 这种Null对象还可以用于在数据不可用时提供默认行为. 在空对象模式(Nu ...

  3. 用其他音乐源帮帮网易云，Ubuntu听歌利器

    镜像文章 1.用其他音乐源帮帮网易云,Android听歌利器 2.用其他音乐源帮帮网易云,Windows听歌利器 众所周知,国内只有网易云推出了Linux的客户端,在Listen 1并不十分好用的基础 ...

  4. golang的数据类型之字符串类型

    基本案例: [root@node3 shangxuetang]# cat string.go package main import "fmt" func main() { //s ...

  5. Python：我可以使用类变量作为线程锁吗？

    我正在考虑使用类变量作为线程锁,因为我不想在全局变量中定义锁并且还想防止死锁.这实际上有用吗?例: import threading class A(object): lock = threading ...

  6. Python基础篇(set集合)

    Python基础篇(set集合,深浅拷贝) set集合是Python的一个基本类型,一般是不常用.set中的元素是不重复的.无序的里边 的元素必须是可hash的比如int,str,tuple,bool ...

  7. DB2 SQL error: SQLCODE: -668, SQLSTATE: 57016, SQLERRMC: 3

    在对表load数据之后,表出现如下错误: DB2 SQL error: SQLCODE: -668, SQLSTATE: 57016, SQLERRMC: 3; 错误解释:表处于"装入暂挂& ...

  8. SpringBoot整合Druid，密码加密

    1.application.yml配置 spring: datasource: url: jdbc:mysql://127.0.0.1:3306/jby?serverTimezone=UTC& ...

  9. jgGrid常用操作--持续更新

    最近有使用到jqGrid框架,有个需求是单击某个字段,比如name,然后把id带过去执行一个function,网上有说用线获取选中行,然后再得到id的方法,此方法经实验,必须要先选中才行,在用户没有进 ...

  10. SQL数据库— <3>高级查询、常用函数 --摘录网络

    SQL Server T-SQL高级查询 高级查询在数据库中用得是最频繁的,也是应用最广泛的. Ø 基本常用查询 --select select * from student; --all 查询所有 ...