vue实现轮播效果

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

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

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.   <meta charset="utf-8">
  6.   <title>test</title>
  7.   <script src="vue.js"></script>
  8. </head>
  9.  
  10. <body>
  11.   <div id="app">
  12.     <!-- 左侧img图片 -->
  13.     <div class="leftlList ">
  14.       <div v-for="(leftImg,index) in leftImgs" :key = "index">
  15.         <label :key="index + 'A'">{{ index + 1 }}</label>
  16.         <div @click="clickImg(index)" :key="index + 'B'" class="img" :class="[leftIndex == index?'listImgActived': '']">
  17.           <img :src="leftImg.url">
  18.           <!-- 11111 -->
  19.         </div>
  20.       </div>
  21.     </div>
  22.     <!-- 分割线 -->
  23.     <div class="string"></div>
  24.  
  25.     <!-- 中间展示的图片 -->
  26.     <div class="centerImg" v-for="(leftImg,index) in leftImgs" :key="index + 'C'">
  27.       <img :src="leftImg.url" v-show="index == leftIndex">
  28.     </div>
  29.   </div>
  30.  
  31.   <script>
  32.     new Vue({
  33.       el: '#app',
  34.       data: {
  35.         leftIndex: 0,
  36.         leftImgs: [{
  37.             url: 'src/assets/a.jpg'
  38.           },
  39.           {
  40.             url: 'src/assets/b.jpg'
  41.           },
  42.           {
  43.             url: 'src/assets/c.jpg'
  44.           },
  45.           {
  46.             url: 'src/assets/d.jpg'
  47.           }
  48.         ]
  49.       },
  50.       methods: {
  51.         clickImg(index) {
  52.           this.leftIndex = index;
  53.         }
  54.       }
  55.     });
  56.  
  57.   </script>
  58.  
  59.   <style>
  60.     body {
  61.       padding: 0;
  62.       margin: 0
  63.     }
  64.  
  65.     #app {
  66.       position: absolute;
  67.       background-color: black;
  68.       width: 100%;
  69.       height: 100%;
  70.     }
  71.  
  72.     .leftlList {
  73.       color: white;
  74.       position: absolute;
  75.       margin-top: 40px;
  76.       margin-left: 40px;
  77.       width: 190px;
  78.       height: calc(100% - 80px);
  79.     }
  80.  
  81.     .leftlList div .img {
  82.       display: inline-block;
  83.       margin: 16px 14px;
  84.       text-align: center;
  85.       vertical-align: middle;
  86.       /* width: 130px;
  87.       height: 130px;
  88.       line-height: 130px; */
  89.     }
  90.  
  91.     .leftlList div .img img {
  92.       width: 130px;
  93.       height: 130px;
  94.       line-height: 130px;
  95.     }
  96.  
  97.     #app .string {
  98.       position: absolute;
  99.       margin-left: 220px;
  100.       margin-top: 40px;
  101.       height: calc(100% - 80px);
  102.       border: 2px solid pink;
  103.       display: inline-block;
  104.     }
  105.  
  106.     .centerImg {
  107.       position: absolute;
  108.       width: calc(100% - 430px);
  109.       margin-left: 300px;
  110.       margin-top: 70px;
  111.       text-align: center;
  112.       vertical-align: middle;
  113.     }
  114.  
  115.     .listImgActived {
  116.       border: 2px solid aqua;
  117.     }
  118.  
  119.   </style>
  120. </body>
  121.  
  122. </html>

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

可以把

  1.  /* width: 130px;
  2.       height: 130px;
  3.       line-height: 130px; */
    这三行代码取消。
  4.  
  5. 另外，如果出现下面这样的报错的话：

是因为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. flask实现异步任务

    最近在开发同步mysql数据到redis的接口,因为数据同步涉及各种增删查改,如果用同步实现,可能回造成连接超时.堵塞,所以,使用python实现异步任务. 代码实现from flask import ...

  2. oo_project_2java数据类型范围及测试

    数据类型范围测试 一.数字常数的编译问题 java中的常量数字默认以int型编译 如: long a = 1234567890; //十位 long b = 12345678900; //默认数据为i ...

  3. 26. 60s快速定位服务器性能问题

    60s迅速发现性能问题 uptime dmesg | tail vmstat 1 mpstat -P ALL 1 pidstat 1 iostat -xz 1 free -m sar -n DEV 1 ...

  4. Windows编写driver

    1. 编译 Pspeek.cpp #include <ntddk.h> #define DANIEL_LIST_PROCESS 0x8001 PDRIVER_OBJECT daniel_D ...

  5. Cocos2d-x之Sprite

    |   版权声明:本文为博主原创文章,未经博主允许不得转载. Sprite是Cocos2d-x游戏开发者最常用的类,用图片把精灵(Sprite)显示在屏幕上. 在游戏开发中,经常会遇到精灵(Sprit ...

  6. android Manifest.xml 文件详解

  7. 选择器与过滤器（全）————JQ

    JQ基础--选择器与过滤器(全) JQ选择器 <!DOCTYPE html> <html> <head> <meta charset="UTF-8& ...

  8. 表结构转excel

    SELECTCOLUMN_NAME 列名,COLUMN_TYPE 数据类型,DATA_TYPE 字段类型,CHARACTER_MAXIMUM_LENGTH 长度,IS_NULLABLE 是否为空,CO ...

  9. oracle exp不生成dumpfile，预估出实际导出文件的大小。

    目的:在不创建dumpfile前预估出需要的导出文件大小.  适用于export     实验步骤如下:OS:  Linux test20 2.6.18-238.el5 #1 SMP Sun Dec ...

  10. oracle 的使用

    一. docker 模式下进入数据库 ubuntu@jiang:~$ sudo docker ps -a sudo: unable to resolve host jiang CONTAINER ID ...