vue.js+elementUI实现点击左右箭头切换头像功能(类似轮播图效果)

1.效果图如下

2.vue代码如下

<el-carousel type="card" arrow="always" :loop="false" :initial-index="1"
       indicator-position="none" :autoplay="false">
 <el-carousel-item v-for="(items, index) in item.userInfo1" :key="index">
  <div class="div2">
   <div>
    <div style="position: absolute;" v-show="item.state===0 || item.state===1">
     <img @click="deleteImg(items,item)" src="../../assets/delete.png"
        class="deleteStyle">
    </div>
    <img :src="items.b_img.url" class="headImgStyle">
   </div>
   <div class="nickname">
    {{items.b_nickname}}
   </div>
  </div>
 </el-carousel-item>
</el-carousel>

3.修改的样式

 .el-carousel__item.el-carousel__item--card.is-in-stage {
  text-align: center;
 }
/*修改高度*/
 .el-carousel__container {
  height: 100px;
 }
 .van-collapse-item__content {
  padding: 14px 0;
 }
/*左右箭头的样式*/
 button.el-carousel__arrow.el-carousel__arrow--left, button.el-carousel__arrow.el-carousel__arrow--right {
  font-size: 12px;
  height: 20px;
  width: 20px;
  background: #A099F0;
 }

总结

以上所述是小编给大家介绍的vue.js+elementUI实现点击左右箭头切换头像功能(类似轮播图效果),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

时间: 2019-09-04

使用vue.js2.0 + ElementUI开发后台管理系统详细教程(一)

1. 根据官方指引,构建项目框架 # 安装vue $ cnpm install vue@2.1.6 # 全局安装 vue-cli $ cnpm install --global vue-cli # 创建一个基于 webpack 模板的新项目my-project $ vue init webpack my-project # 进入项目目录 $ cd my-project # 安装依赖,走你 $ cnpm install # 运行项目 $ cnpm run dev 2. 运行项目之后,会看到以下界面

基于vue.js轮播组件vue-awesome-swiper实现轮播图

一般做移动端轮播图的时候,最常用的就是Swiper插件了,而vue.js也有一个轮播组件vue-awesome-swiper,用法跟swiper相似. 1.安装vie-awesome-swiper nam install vue-awesome-swiper --save-dev 2.引用vie-awesome-swiper组件,这里我是用vie-cli创建的项目,在main.js: import VueAwesomeSwiper from 'vue-awesome-swiper'; Vue.u

Vue.js点击切换按钮改变内容的实例讲解

代码实例: 代码描述:点击切换按钮,来改变显示的内容,切换不同的单位.flag相当于一个开关,控制开关的改变,来切换不同的单位.同样适用于其他的切换内容实例,也可设置按钮点击显示隐藏等. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue点击切换改变内容</title> <script src="https://cdn.bo

Spring boot + mybatis + Vue.js + ElementUI 实现数据的增删改查实例代码(一)

环境搭建 spring boot的简介 以往我们开发时用到spring总是避免不了繁琐的配置,例如我们要配置一个数据库连接,可能需要以下几步: 1.编写jdbc.properties配置文件: 2.创建spring的配置文件,加入spring配置文件前缀.配置数据库连接信息以及sqlsessionFactory等等: 3.还要在web.xml文件中加入spring的监听. springboot的出现大大简化了项目的搭建过程(spring配置以及maven配置),让我们专注于应用功能的开发,而不是

使用vue.js2.0 + ElementUI开发后台管理系统详细教程(二)

在上篇文章给大家介绍了使用vue.js2.0 + ElementUI开发后台管理系统详细教程(一) 1. 引入路由工具vue-router,切换视图 # 安装vue-router cnpm install vue-router --save-dev 2. 使用vue-router main.js import Vue from 'vue' import App from './App' import VueRouter from 'vue-router' import routeConfig f

vue.js实现简单轮播图效果

学习了vue.js也有一段时间了,做了个小demo来熟悉一下,很常见的demo,-------轮播图,没学vue之前的轮播图用JavaScript或者jquery都非常简单,发现用vue来写也挺有意思的.说下简单的思路,图片的轮播用v-if或者v-show来代替原来的Js滑动,过度效果用transition可简单实现,注意,滑动过程中是能看见两张图的,所以要用两个transition. (1)先写出整体的框架 <template> <div class="slide-show&

vue.js整合mint-ui里的轮播图实例代码

初始化vue项目 npm install -g vue-cli vue init webpack demo # 中间会让你选npm yarn 等来安装依赖,我选的是yarn,因为它快些 安装mint-ui yarn add mint-ui mint-ui装好了,还要配置一下babel,方法跟着mint-ui的官方文档来配置就可以了 下面是我配置好的 .babelrc 文件,启动的时候会报跟es2015相关的错,装一下 babel-preset-es2015 就好了 { "presets"

在bootstrap中实现轮播图实例代码

Bootstrap中轮播图插件叫作Carousel 以下容器就是整个轮播图组件的整体, 注意该盒子必须加上 class="carousel slide" data-ride="carousel" 表示当 前是一个轮播图 bootstrap.js会自动为当前元素添加图片轮播的特效 <div id="轮播图的ID" class="carousel slide" data-ride="carousel"&g

用vue写一个仿简书的轮播图的示例代码

1.先展示最终效果: 2.解决思路 Vue的理念是以数据驱动视图,所以拒绝通过改变元素的margin-top来实现滚动效果.写好css样式,只需改变每张图片的class即可实现轮播效果.动画效果交给transition完成.可以将轮播图看成两个(mainSlide和extraSlide),各个图片的位置如图所示: 3.代码实现 各个slide的样式: $width: 800px; // 容器宽度 $height: 300px; // 容器高度 $bWidth: 500px; // 大图片宽度 $

Vue项目中使用better-scroll实现一个轮播图自动播放功能

前言 better-scroll是一个非常非常强大的第三方库 在移动端利用这个库 不仅可以实现一个非常类似原生ScrollView的效果 也可以实现一个轮播图的效果 这里就先记录一下自己实现这个效果的一些过程吧 思路 1.首先要确定自己的HTML结构 基本结构就是一个wrapper包含一个content 2.其次需要明白的一个页面可以滚动的原理在于 当内容的高度超出了容器的高度才可以实现滚动 如果没有超出 那么就没有滚动的必要 因此第一点需要实现的就是 获取到所有内容的高度 由于实现的是一个轮播

JS中Swiper的使用和轮播图效果

Swiper是移动端的一款非常强大的触摸滑动插件,下面代码只展示一些常用的配置,具体可以查看官网api <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="swiper.min.cs

vue.js 左侧二级菜单显示与隐藏切换的实例代码

废话不多说了,直接给大家贴代码了, 完整代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue点击切换显示隐藏</title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> <style type

JS原生带小白点轮播图实例讲解

咱们刚刚说了js原生轮播图,现在给他加上可以随着一起走动的小圆点吧! css代码: *{ margin:0px; padding: 0px; } ul{ width: 2500px; height: 300px; position: absolute; } li{ float: left; list-style: none; } img{ width: 500px; height: 300px; } div{ width: 500px; height: 300px; margin: 50px a

js实现3D图片逐张轮播幻灯片特效代码分享

本文实例讲述了javascript实现3D图片逐张轮播幻灯片特效.分享给大家供大家参考.具体如下: 这是一款基于javascript实现3D图片逐张轮播幻灯片特效代码,实现过程很简单. 运行效果图:-------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的js实现3D图片逐张轮播幻灯片特效代码如下 <head> <meta http-equiv="Content-Type

vue.js通过路由实现经典的三栏布局实例代码

经典的三栏布局效果图如下: 三栏布局 •将布局的各个区块定义成组件 <template id="header"> <div class="header bg-primary text-center"> <h3>头部区域</h3> </div> </template> <template id="left"> <div class="left bg-

JS实现头条新闻的经典轮播图效果示例

本文实例讲述了JS实现头条新闻的经典轮播图效果.分享给大家供大家参考,具体如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, m