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实现点击左右箭头切换头像功能(类似轮播图效果),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
相关推荐
-
使用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整合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"
-
vue.js实现简单轮播图效果
学习了vue.js也有一段时间了,做了个小demo来熟悉一下,很常见的demo,-------轮播图,没学vue之前的轮播图用JavaScript或者jquery都非常简单,发现用vue来写也挺有意思的.说下简单的思路,图片的轮播用v-if或者v-show来代替原来的Js滑动,过度效果用transition可简单实现,注意,滑动过程中是能看见两张图的,所以要用两个transition. (1)先写出整体的框架 <template> <div class="slide-show&
-
Spring boot + mybatis + Vue.js + ElementUI 实现数据的增删改查实例代码(一)
环境搭建 spring boot的简介 以往我们开发时用到spring总是避免不了繁琐的配置,例如我们要配置一个数据库连接,可能需要以下几步: 1.编写jdbc.properties配置文件: 2.创建spring的配置文件,加入spring配置文件前缀.配置数据库连接信息以及sqlsessionFactory等等: 3.还要在web.xml文件中加入spring的监听. springboot的出现大大简化了项目的搭建过程(spring配置以及maven配置),让我们专注于应用功能的开发,而不是
-
Vue.js点击切换按钮改变内容的实例讲解
代码实例: 代码描述:点击切换按钮,来改变显示的内容,切换不同的单位.flag相当于一个开关,控制开关的改变,来切换不同的单位.同样适用于其他的切换内容实例,也可设置按钮点击显示隐藏等. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue点击切换改变内容</title> <script src="https://cdn.bo
-
基于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.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+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 it
-
基于JS实现仿百度百家主页的轮播图效果
HTML <div class="ShowEntry"> <!-- <div id="widget_content_player" class="Player" alog-group="log-player">--> <!--------- 右击箭头---------> <a href="javascript:void(0);" rel="ex
-
原生js实现简单轮播图效果
本文实例为大家分享了js实现简单轮播图效果的具体代码,供大家参考,具体内容如下 效果如下: 分析: 分析效果: 分析实现: 1.通过 document.querySelector('.类名') 的形式获取到装轮播图的大盒子(.carousel).装轮播图左右按钮的标签的父元素(.chevron).获取左右按钮(.chevron-left ..chevron-right).获取放轮播图图片的父元素ul(.carousel-body)[注:这里获取ul而不是回去li,是因为移动轮播图的时候是整个ul
-
原生JS实现简单的轮播图效果
本文实例为大家分享了JS实现简单的轮播图效果的具体代码,供大家参考,具体内容如下 实现效果: 功能需求: 1.鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮 2.点击右侧按钮一次,图片往左播放一张,左侧按钮同理. 3.图片播放的同时,下面的小圆圈模块也跟随一起变化. 5.鼠标不经过轮播图,轮播图会自动向右播放图片,经过轮播图之后停止自动播放图片. 轮播图向右移动的时候要用到缓动画的函数,具体见博客:JS实现添加缓动画的方法 (1)布局:轮播图部分的图片用ul进行布局,里面的每个li放a标签,
-
使用html+js+css 实现页面轮播图效果(实例讲解)
html 页面 <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=
-
简单实现js轮播图效果
本文实例为大家分享了js实现轮播图效果展示的具体代码,供大家参考,具体内容如下 html结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0; padding:0; font-size:14px; -webkit-use
-
Bootstrap实现基于carousel.js框架的轮播图效果
本文实例为大家分享了Bootstrap轮播图效果展示的具体代码,供大家参考,具体内容如下 声明式触发需要使用到的几个data-*属性 1.data-ride:作用在最外层容器上,固定值:carousel 2.data-target:作用在class=carousel-indicators的每个子元素li上面,标注对那个元素进行点击轮播 3.data-slide:作用在前翻页和后翻页的两个a链接上,prev表示前翻页,next表示后翻页 4.data-slide-to:作用在class=carou
-
vue使用swiper实现中间大两边小的轮播图效果
项目中使用的vue,刚好有需求要实现轮播图,突出显示当前图片,两边展示其他图片:通过查各种资料,实现了,故在此记录下来 下面我们来看下实现步骤: 第一步:首先在项目index.html中引入swiper的css文件- swiper.min.css 第二部:写入dom结构 <div class="swiper-container"> <div class="swiper-wrapper"> <div v-for="(item,
-
原生JS实现pc端轮播图效果
本文实例为大家分享了JS实现pc端轮播图效果的具体代码,供大家参考,具体内容如下 案例:轮播图需求 布局:ul下有很多li标签:浮动在一行: 原理:切换图片的时候,把ul位置修改一下,给ul的父容器,设置一个 overflow:hidden: 功能需求: 序号轮播 左右按钮的轮播 自动轮播 鼠标在轮播图里面的时候,停止自动轮播,离开后继续自动轮播 实现效果: html部分 <div class="box" id="box"> <div class=
-
vue仿携程轮播图效果(滑动轮播,下方高度自适应)
先看案例,使用vue+swiper实现,slide不同高度时,动态计算盒子高度,让其下方高度自适应的效果 首先搭建vue项目,这里不做过多说明,然后安装swiper npm install swiper --save-dev 1. js部分:初始化swiper组件,vue要在mounted生命周期中进行初始化,代码如下: import Swiper from 'swiper' import { TweenMax, Power2 } from 'gsap' 初始化时调用resize函数,计算屏幕容
随机推荐
- BootStrap+Angularjs+NgDialog实现模式对话框
- AngularJS Ajax详解及示例代码
- Vue.js实现价格计算器功能
- nodejs 图片预览和上传的示例代码
- ES6中新增的Object.assign()方法详解
- Del (erase) 删除指定文件
- BAT批处理实现Fibonacci函数
- springmvc fastjson 反序列化时间格式化方法(推荐)
- 基于Java堆内存的10个要点的总结分析
- js实现淡入淡出轮播切换功能
- Python制作刷网页流量工具
- C++实现对输入数字组进行排序
- 读写xml文件的2个小函数
- DevExpress实现自定义TreeListNode的Tooltip的方法
- toggle一个div显示或隐藏且可扩展成自定义下拉框
- Luhn算法学习及其Ruby版实现代码示例
- Powershell小技巧之用变量累积记录错误
- JavaScript中Date.toSource()方法的使用教程
- Java中的this指针使用方法分享
- Java解析xml的四种方法汇总