Element Carousel 走马灯的具体实现


Posted in Javascript onJuly 26, 2020

本文来源于Element官方文档:

http://element-cn.eleme.io/#/zh-CN/component/carousel

基础用法

普通走马灯

<div class="block">
<span class="demonstration">默认 Hover 指示器触发</span>
<el-carousel height="150px">
<el-carousel-item v-for="item in 4" :key="item">
<h3>{{ item }}</h3>
</el-carousel-item>
</el-carousel>
</div>
<div class="block">
<span class="demonstration">Click 指示器触发</span>
<el-carousel trigger="click" height="150px">
<el-carousel-item v-for="item in 4" :key="item">
<h3>{{ item }}</h3>
</el-carousel-item>
</el-carousel>
</div>

组件— 走马灯

基础用法

Element Carousel 走马灯的具体实现

<template>
 <div class="block">
  <span class="demonstration">默认 Hover 指示器触发</span>
  <el-carousel height="150px">
   <el-carousel-item v-for="item in 4" :key="item">
    <h3 class="small">{{ item }}</h3>
   </el-carousel-item>
  </el-carousel>
 </div>
 <div class="block">
  <span class="demonstration">Click 指示器触发</span>
  <el-carousel trigger="click" height="150px">
   <el-carousel-item v-for="item in 4" :key="item">
    <h3 class="small">{{ item }}</h3>
   </el-carousel-item>
  </el-carousel>
 </div>
</template>

<style>
 .el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
 }

 .el-carousel__item:nth-child(2n) {
   background-color: #99a9bf;
 }
 
 .el-carousel__item:nth-child(2n+1) {
   background-color: #d3dce6;
 }
</style>

指示器

Element Carousel 走马灯的具体实现

<template>
 <div class="block">
  <span class="demonstration">默认 Hover 指示器触发</span>
  <el-carousel height="150px">
   <el-carousel-item v-for="item in 4" :key="item">
    <h3 class="small">{{ item }}</h3>
   </el-carousel-item>
  </el-carousel>
 </div>
 <div class="block">
  <span class="demonstration">Click 指示器触发</span>
  <el-carousel trigger="click" height="150px">
   <el-carousel-item v-for="item in 4" :key="item">
    <h3 class="small">{{ item }}</h3>
   </el-carousel-item>
  </el-carousel>
 </div>
</template>

<style>
 .el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
 }

 .el-carousel__item:nth-child(2n) {
   background-color: #99a9bf;
 }
 
 .el-carousel__item:nth-child(2n+1) {
   background-color: #d3dce6;
 }
</style>

切换箭头

Element Carousel 走马灯的具体实现

<template>
 <div class="block">
  <span class="demonstration">默认 Hover 指示器触发</span>
  <el-carousel height="150px">
   <el-carousel-item v-for="item in 4" :key="item">
    <h3 class="small">{{ item }}</h3>
   </el-carousel-item>
  </el-carousel>
 </div>
 <div class="block">
  <span class="demonstration">Click 指示器触发</span>
  <el-carousel trigger="click" height="150px">
   <el-carousel-item v-for="item in 4" :key="item">
    <h3 class="small">{{ item }}</h3>
   </el-carousel-item>
  </el-carousel>
 </div>
</template>

<style>
 .el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
 }

 .el-carousel__item:nth-child(2n) {
   background-color: #99a9bf;
 }
 
 .el-carousel__item:nth-child(2n+1) {
   background-color: #d3dce6;
 }
</style>

卡片化

Element Carousel 走马灯的具体实现

<template>
 <el-carousel :interval="4000" type="card" height="200px">
  <el-carousel-item v-for="item in 6" :key="item">
   <h3 class="medium">{{ item }}</h3>
  </el-carousel-item>
 </el-carousel>
</template>

<style>
 .el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
 }
 
 .el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
 }
 
 .el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
 }
</style>

方向

Element Carousel 走马灯的具体实现

<template>
 <el-carousel height="200px" direction="vertical" :autoplay="false">
  <el-carousel-item v-for="item in 3" :key="item">
   <h3 class="medium">{{ item }}</h3>
  </el-carousel-item>
 </el-carousel>
</template>

<style>
 .el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
 }
 
 .el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
 }
 
 .el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
 }
</style>

Carousel Attributes

参数 说明 类型 可选值 默认值
height 走马灯的高度 string
initial-index 初始状态激活的幻灯片的索引,从 0 开始 number 0
trigger 指示器的触发方式 string click
autoplay 是否自动切换 boolean true
interval 自动切换的时间间隔,单位为毫秒 number 3000
indicator-position 指示器的位置 string outside/none
arrow 切换箭头的显示时机 string always/hover/never hover
type 走马灯的类型 string card

Carousel Events

事件名称 说明 回调参数
change 幻灯片切换时触发 目前激活的幻灯片的索引,原幻灯片的索引

Carousel Methods

方法名 说明 参数
setActiveItem 手动切换幻灯片 需要切换的幻灯片的索引,从 0 开始;或相应 el-carousel-item 的 name 属性值
prev 切换至上一张幻灯片
next 切换至下一张幻灯片

Carousel-Item Attributes

参数 说明 类型 可选值 默认值
name 幻灯片的名字,可用作 setActiveItem 的参数 string
label 该幻灯片所对应指示器的文本 string

到此这篇关于Element Carousel 走马灯的具体实现的文章就介绍到这了,更多相关Element Carousel 走马灯内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JavaScript和ActionScript的交互实现代码
Aug 01 Javascript
js正则表达exec与match的区别说明
Jan 29 Javascript
JavaScript实现查找字符串中第一个不重复的字符
Dec 29 Javascript
纯javascript实现的小游戏《Flappy Pig》实例
Jul 27 Javascript
基于JavaScript实现根据手机定位获取当前具体位置(X省X市X县X街道X号)
Dec 29 Javascript
微信小程序 教程之模板
Oct 18 Javascript
Vue.js实现实例搜索应用功能详细代码
Aug 24 Javascript
jquery 键盘事件的使用方法详解
Sep 13 jQuery
使用html+js+css 实现页面轮播图效果(实例讲解)
Sep 21 Javascript
详解vue服务端渲染浏览器端缓存(keep-alive)
Oct 12 Javascript
微信小程序图表插件wx-charts用法实例详解
May 20 Javascript
Vue路由切换页面不更新问题解决方案
Jul 10 Javascript
three.js欧拉角和四元数的使用方法
Jul 26 #Javascript
Element Collapse 折叠面板的使用方法
Jul 26 #Javascript
Element Input输入框的使用方法
Jul 26 #Javascript
解决vuex数据页面刷新后初始化操作
Jul 26 #Javascript
Angular利用HTTP POST下载流文件的步骤记录
Jul 26 #Javascript
vue中keep-alive、activated的探讨和使用详解
Jul 26 #Javascript
关于angular浏览器兼容性问题的解决方案
Jul 26 #Javascript
You might like
浅析PHP的静态成员函数效率更高的原因
2014/06/13 PHP
Yii使用CLinkPager分页实例详解
2014/07/23 PHP
PHP框架性能测试报告
2016/05/08 PHP
Yii实现微信公众号场景二维码的方法实例
2020/08/30 PHP
use jscript List Installed Software
2007/06/11 Javascript
js弹窗代码 可以指定弹出间隔
2010/07/03 Javascript
js选取多个或单个元素的实现代码(用class)
2012/08/22 Javascript
javascript 3d 逐侦产品展示(核心精简)
2014/03/26 Javascript
javascript将浮点数转换成整数的三个方法
2014/06/23 Javascript
jquery 页眉单行信息滚动显示实现思路及代码
2014/06/26 Javascript
JS回调函数的应用简单实例
2014/09/17 Javascript
BootStrap Validator 版本差异问题导致的submitHandler失效问题的解决方法
2016/12/01 Javascript
node.js中cluster的使用教程
2017/06/09 Javascript
JavaScript标准对象_动力节点Java学院整理
2017/06/27 Javascript
bootstrap Table的一些小操作
2017/11/01 Javascript
详解从零搭建 vue2 vue-router2 webpack3 工程
2017/11/22 Javascript
vue iview实现动态路由和权限验证功能
2018/04/17 Javascript
ios设备中angularjs无法改变页面title的解决方法
2018/09/13 Javascript
微信小程序实现判断是分享到群还是个人功能示例
2019/05/03 Javascript
解决在Vue中使用axios POST请求变成OPTIONS的问题
2020/08/14 Javascript
[58:35]OG vs EG 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.22
2019/09/05 DOTA
[49:08]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第一场 11.27
2020/12/01 DOTA
[05:08]DOTA2-DPC中国联赛3月6日Recap集锦
2021/03/11 DOTA
Python利用pyHook实现监听用户鼠标与键盘事件
2014/08/21 Python
python使用百度文字识别功能方法详解
2019/07/23 Python
python多进程 主进程和子进程间共享和不共享全局变量实例
2020/04/25 Python
python进度条显示-tqmd模块的实现示例
2020/08/23 Python
python 监控服务器是否有人远程登录(详细思路+代码)
2020/12/18 Python
力学专业毕业生自荐信
2013/11/17 职场文书
保护地球的标语
2014/06/17 职场文书
计算机毕业大学生求职信
2014/06/26 职场文书
大学生推广普通话演讲稿
2014/09/21 职场文书
2014年审计工作总结
2014/11/17 职场文书
公务员岗前培训心得体会
2016/01/08 职场文书
初中物理教学反思
2016/02/19 职场文书
python用字节处理文件实例讲解
2021/04/13 Python