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 相关文章推荐
js 弹出菜单/窗口效果
Oct 30 Javascript
『jQuery』.html(),.text()和.val()的概述及使用
Apr 22 Javascript
js获取当月最后一天实例代码
Nov 19 Javascript
jQuery+AJAX实现网页无刷新上传
Feb 22 Javascript
jQuery制作可自定义大小的拼图游戏
Mar 30 Javascript
jQuery+html5实现div弹出层并遮罩背景
Apr 15 Javascript
详解js类型判断
May 22 Javascript
js比较两个单独的数组或对象是否相等的实例代码
Apr 28 Javascript
使用apifm-wxapi模块中的问题及解决方法
Aug 05 Javascript
js实现图片区域可点击大小随意改变(适用移动端)代码实例
Sep 11 Javascript
Vue父组件向子组件传值以及data和props的区别详解
Mar 02 Javascript
8个非常实用的Vue自定义指令
Dec 15 Vue.js
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
在“咖啡之国”感受咖啡文化
2021/03/03 咖啡文化
递归列出所有文件和目录
2006/10/09 PHP
自定义php类(查找/修改)xml文档
2013/03/26 PHP
让CodeIgniter数据库缓存自动过期的处理的方法
2014/06/12 PHP
php+ajax实时刷新简单实例
2015/02/25 PHP
PHP实现广度优先搜索算法(BFS,Broad First Search)详解
2017/09/16 PHP
Nigma vs Liquid BO3 第一场2.13
2021/03/10 DOTA
javascript Xml增删改查(IE下)操作实现代码
2009/01/30 Javascript
推荐6款基于jQuery实现图片效果插件
2014/12/07 Javascript
node.js中的events.emitter.once方法使用说明
2014/12/10 Javascript
JS实现的N多简单无缝滚动代码(包含图文效果)
2015/11/06 Javascript
基于jquery实现省市区三级联动效果
2015/12/25 Javascript
基于javascript实现最简单的选项卡切换效果
2016/05/16 Javascript
vue制作加载更多功能的正确打开方式
2016/10/12 Javascript
jQuery之动画效果大全
2016/11/09 Javascript
NodeJS实现微信公众号关注后自动回复功能
2017/05/31 NodeJs
详解VueRouter进阶之导航钩子和路由元信息
2017/09/13 Javascript
关于vue的语法规则检测报错问题的解决
2018/05/21 Javascript
在vue中使用axios实现post方式获取二进制流下载文件(实例代码)
2019/12/16 Javascript
微信小程序开发数据缓存基础知识辨析及运用实例详解
2020/11/06 Javascript
vue实现按钮切换图片
2021/01/20 Vue.js
Python多线程结合队列下载百度音乐的方法
2015/07/27 Python
python保存字典和读取字典的实例代码
2019/07/07 Python
Python数学形态学实例分析
2019/09/06 Python
彼得罗夫美国官网:Peter Thomas Roth美国(青瓜面膜)
2017/11/05 全球购物
如何用SQL语句进行模糊查找
2015/09/25 面试题
护理学毕业生求职信
2013/11/14 职场文书
电大毕业生自我鉴定
2014/04/10 职场文书
班级心理活动总结
2014/07/04 职场文书
公安个人四风问题对照检查及整改措施
2014/10/28 职场文书
蓬莱阁导游词
2015/02/04 职场文书
投资入股协议书
2016/03/22 职场文书
励志正能量20句:送给所有为梦想拼搏的人
2019/11/11 职场文书
导游词之永泰公主墓
2019/12/04 职场文书
nginx优化的六点方法
2021/03/31 Servers
浅谈Mysql多表连接查询的执行细节
2021/04/24 MySQL