添加ref 和 点击哪个地方切换的方法

<div class="center">
      <div class="pw between">
        <div class="shouji">
          <img src="../assets/images/shouji_03.png" alt="" style="width: 412px;height: 925px;display: block;">
          <div class="sjp">
            <el-carousel indicator-position="none"  @change="changeCarousel" :height="525+'px'" ref="carousel" >
              <el-carousel-item v-for="(item, index) in sjImgList" :key="index">
                <img :src="item.banner"  style="width: 100%;height: 100%;" alt="">
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
        <div class="mcbox">
          <div class="mctitle">营销功能</div>
          <div class="mcconbox">
            <div class="mccibox" v-for="item in sjImgList" :key="item.type" @click="change_sj_desc(item.type)">
              <img :src="item.url" alt="" v-if="item.type != bannerSel">
              <img :src="item.selUrl" alt="" v-if="item.type == bannerSel">
              <div class="mcciright">
                <div class="title" :style="item.type == bannerSel && 'color: #4571ff;'">{{item.title}}</div>
                <div class="con" :style="item.type == bannerSel && 'color: #4571ff;'">{{item.desc}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
 
方法:
change_sj_desc(type) {
      console.log('type', type)
      this.$refs.carousel.setActiveItem(type)
    }

el-carousel手动切换图片的更多相关文章

  1. HTML-制作图片的自动播放和手动切换

    思路:将想要播放的图片放入集合中,设置一个div,将图片依次从集合中定时取出放到div中展示:设置一个变量,通过变量与集合元素索引联系起来,点击改变时,获取当前图片的索引以切换图片 整体代码: < ...

  2. js多种切换图片

    分享通过js实现多种图片切换特效,这里只有手动切换哦,自动效果需自写,效果地址:http://dwz.cn/1drD5u. 下载地址:http://***/download/index/52209 适 ...

  3. jQuery-图片轮播-随意切换图片

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. javascript设计模式实践之职责链--具有百叶窗切换图片效果的JQuery插件(三)

    在上一篇<javascript设计模式实践之模板方法--具有百叶窗切换图片效果的JQuery插件(二)>里,通过采用模板方法模式完成了切换效果对象的构建编写. 接下来就是完成各效果对象的调 ...

  5. javascript设计模式实践之模板方法--具有百叶窗切换图片效果的JQuery插件(二)

    在上一篇<javascript设计模式实践之迭代器--具有百叶窗切换图片效果的JQuery插件(一)>里,通过采用迭代器模式完成了各初始化函数的定义和调用. 接下来就要完成各个切换效果的编 ...

  6. javascript设计模式实践之迭代器--具有百叶窗切换图片效果的JQuery插件(一)

    类似于幻灯片的切换效果,有时需要在网页中完成一些图片的自动切换效果,比如广告,宣传,产品介绍之类的,那么单纯的切就没意思了,需要在切换的时候通过一些效果使得切换生动些. 比较常用之一的就是窗帘切换了. ...

  7. Android中仿淘宝首页顶部滚动自定义HorizontalScrollView定时水平自动切换图片

    Android中仿淘宝首页顶部滚动自定义HorizontalScrollView定时水平自动切换图片 自定义ADPager 自定义水平滚动的ScrollView效仿ViewPager 当遇到要在Vie ...

  8. jQuery演示10种不同的切换图片列表动画效果

    经常用到的图片插件演示jQuery十种不同的切换图片列表动画效果 在线演示 下载地址 实例代码 <!DOCTYPE html> <html lang="en" c ...

  9. HA模式强制手动切换:IPC's epoch [X] is less than the last promised epoch [X+1]

    -- ::, WARN org.apache.hadoop.hdfs.qjournal.client.QuorumJournalManager: Remote journal failed to wr ...

随机推荐

  1. maven——使用阿里云镜像

    1.在本地的仓库目录下找到settings.xml文件,添加 <mirrors> <mirror> <id>alimaven</id> <name ...

  2. web服务器-nginx配置文件

    web服务器-nginx配置文件 一 nginx配置文件 #启动子进程程序的默认用户 #user nobody #一个主进程和多个工作进程.工作进程是单进程的,且不需要特殊授权即可运行:这里定义的是工 ...

  3. Blazor 001 : 一个激进的Web开发框架

    本文从比较高的位置俯瞰一下 .NET Blazor 技术方向,主要是给大家介绍一下"什么是 Blazor" 文章后半部分会给出一个 Blazor 中的 Hello World 示例 ...

  4. BUAA_C++算法板子积累_动态规划、图算法、计算几何、FFT

    Hello #include <iostream> #include <cstdio> #include <cctype> #include <cmath&g ...

  5. Java基础 (上)

    基础概念与常识 Java 语言有哪些特点? 简单易学: 面向对象(封装,继承,多态): 平台无关性( Java 虚拟机实现平台无关性): 支持多线程( C++ 语言没有内置的多线程机制,因此必须调用操 ...

  6. Kafka 与传统 MQ 消息系统之间有三个关键区别?

    (1).Kafka 持久化日志,这些日志可以被重复读取和无限期保留 (2).Kafka 是一个分布式系统:它以集群的方式运行,可以灵活伸缩,在内部通过 复制数据提升容错能力和高可用性 (3).Kafk ...

  7. Springmvc入门基础(二) ---架构详解

    1.框架结构图 架构流程文字说明 用户发送请求至前端控制器DispatcherServlet DispatcherServlet收到请求调用HandlerMapping处理器映射器. 处理器映射器根据 ...

  8. probably another instance of uWSGI is running on the same address (127.0.0.1:9090). bind(): Address ...

    probably another instance of uWSGI is running on the same address (127.0.0.1:9090). bind(): Address ...

  9. 什么是 MyBatis 的接口绑定?有哪些实现方式?

    接口绑定,就是在 MyBatis 中任意定义接口,然后把接口里面的方法和 SQL 语句绑 定, 我们直接调用接口方法就可以,这样比起原来了 SqlSession 提供的方法我们可 以有更加灵活的选择和 ...

  10. IDEA问题之“微服务启动项目时,不会加载Spring Boot到Services中”

    1.启动项目时,不会加载Spring Boot到Services中 现象解析: 启动项目时 会在debug的位置加载项目 注:这里没有配图,因为问题已解决,未记录图,需往后遇到记录 解决方案: 需要在 ...