vue——走马灯-类轮播图

前端重积累,话不多说,先上一波效果图:
静态
特意总结的裸着就能使用的轮播图,拿走不谢
vue文件,可以用webstorm进行运行
webstorm前置配置可见如下链接:
nodejs配置

<template><div><el-carousel :interval="2000" type="card" height="220px" ><el-carousel-item v-for="item in imgList" :key="item.id"><img :src="item.idView" class="image"></el-carousel-item></el-carousel></div>
</template><script>
export default {name: "MovieShow",data() {return {imgList: [{id:0,idView:require("@/assets/onedog.webp")},{id:1,idView:require("@/assets/jiangnan.webp")},{id:2,idView:require("@/assets/duye2.webp")},{id:3,idView:require("@/assets/xunlongjue.webp")},{id:4,idView:require("@/assets/baoyuzhe.webp")}]};}
}
</script><style scoped>/*走马灯*/
.el-carousel__item h3 {color: #000000;font-size: 14px;opacity: 0.75;line-height: 200px;margin: 0;
}
.el-carousel__item:nth-child(2n) {width: 650px;color: #000000;
}.el-carousel__item:nth-child(2n+1) {width: 650px;color: #000000;
}
.el-form-item{margin-left: calc(50% - 400px);
}.content .el-form-item__label {color: rgb(130,130,130);}
.col {color: rgb(130,130,130);
}
.image{width: 100%;
}</style>

积少成多,你的努力正以你看得见和看不见的方式走来。
天道酬勤

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/428017.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

VM异常关闭后导致虚拟机无法打开问题解决办法【已解决】

vmware卡的时候&#xff0c;我就去关闭vmware&#xff0c;一直提示vmware服务繁忙&#xff0c;然后我就强制把vmware服务关掉了 再打开的时候就打不开了&#xff0c;弹框提示“”........vmx.exe已提前退出“”&#xff08;具体提示这里没有截图了&#xff09; 解决方法很简单&…

废旧光盘手工小制作_废旧利用 | 幼儿园手工卷纸筒制作大全,超实用

卷纸筒企鹅【所需材料】卷纸筒、黑白两种颜色的卡纸、剪刀、胶水、画笔【步骤教程】1.如图&#xff0c;在卷纸筒上画一个半圆&#xff0c;剪出来2.用黑色卡纸剪出以下的形状&#xff0c;和卷纸筒粘在一起3.再用白色的卡纸画出企鹅的眼睛、嘴巴和脚&#xff0c;粘上就OK啦&#…

vue(el-button的五种类型,三种css格式)

在写一个系统的css文件的时候&#xff0c;发现了不同类型的button的初始颜色不同&#xff0c;为了完美的使button的颜色和背景的颜色相映照&#xff0c;就去搜了一下&#xff0c;小做总结&#xff0c;为以后的使用做准备。 <div><el-button><span>默认按钮&l…

北京集训:20180310

北京集训的第一天&#xff0c;我完美爆零......这其中的经历&#xff0c;十分有趣呢。 T1: 这题一看就是先猜一个性质然后利用他去求解。如果我们知道怎么插入&#xff0c;怎么判定的话&#xff0c;可以线段树分治的说。然后我猜了一个结论:如果稳定&#xff0c;则一定有一个x的…

rs232串口驱动_电脑主板RS232串口硬件设计

更多硬件设计培训视频&#xff0c; 欢迎加入微信公众号“陈苍硬件设计”RS232属于一种电平标准&#xff0c;采用UART异步通信串行数据总线协议。工业电平标准RS422和RS485同样采用UART协议。具体uart的协议格式和RS232电平标准大家可回顾下《低速接口视频》。我们这里主要讲解R…

webstorm运行时遇到问题——localhost8080找不到应用程序

这个很可能是你没有设置默认的浏览器&#xff0c;自己去设置一下就可以。

ccf--20140903--字符串匹配

本题思路简单 题目和代码如下&#xff1a; 问题描述 试题编号&#xff1a;201409-3试题名称&#xff1a;字符串匹配时间限制&#xff1a;1.0s内存限制&#xff1a;256.0MB问题描述&#xff1a; 问题描述给出一个字符串和多行文字&#xff0c;在这些文字中找到字符串出现的那些行…

python安装caffe_Caffe安装笔记二:Caffe安装过程

下面开始正题&#xff0c;caffe的安装过程。因为出问题很多&#xff0c;所以实际上我是尝试了python2和python3两种python的接口。下面一并放出来。1.安装build-essentialsudo apt-get installbuild-essential这个是一些基本的库&#xff0c;具体包括哪些&#xff0c;安装前确认…

vue编写to-do list源码

前端重于积累&#xff0c;下次使用不迷路。 纯vue代码 话不多说,直接上效果图: 源码附上: <template><div class"bgBody"><!-- 卡片--><el-row :gutter"12" ><el-col :span"8" ><el-card shadow"hov…

cenos6.4安装gvim

1. 下载gvim并解压 wget ftp://ftp.vim.org/pub/vim/unix/vim-7.4.tar.bz2 tar -jxvf vim-7.4.tar.bz2 2. 进入解压后的vim74目录并运行配置命令 cd vim74 ./configure --enable-guiauto --enable-cscope --enable-multibyte --enable-xim --enable-fontset --with-featuresh…

vue积累——另一种走马灯

效果图: vue源码: <template><el-carousel :interval"1500" type"card" height"400px" ><el-carousel-item v-for"item in imgList" :key"item.id"><img :src"item.idView" class"im…

python下电影_Python3.6实现根据电影名称(支持电视剧名称),获取下载链接的方法...

本文实例讲述了Python3.6实现根据电影名称(支持电视剧名称)&#xff0c;获取下载链接的方法。分享给大家供大家参考&#xff0c;具体如下&#xff1a;做个笔记(python 3.6&#xff0c;django 2.0)def get_url(outer_order_id):refundId get_refundId(outer_order_id)host_url …

假设检验背后的逻辑

内容转自知乎相关问题答案&#xff0c;写的很清晰。 1. 概述逻辑&#xff1a; 全称命题只能被否证而不能被证明。这个道理很简单&#xff0c;个案当然不足以证明一个全称命题&#xff0c;但是却可以否定全称命题。 研究时&#xff0c;我们当然不希望否证自己的研究假设&#xf…

Arduino上U8g2库自制中文库

U8g2最新版的本身自带中文库&#xff0c;之所以需要自制&#xff0c;是为了减小内存&#xff1b; 文章最后会标一下u8g2自带的中文库不过有些板子不能用gb2312等大字体&#xff1b; 字体库需要的是需要的是下面的这种编码&#xff0c;而实现这种编码&#xff0c;就需要map文件…

数据库创建(利用写好的数据库表生成创建表的sql语句+利用生成的数据库创建表加同步数据sql)

一.利用写好的数据库表生成创建表的sql语句 1.简单创建一个数据库&#xff0c;并建一个表&#xff0c;并编辑数据。 a.建库 b.建表 c.编辑表&#xff0c;保存时输入表名 d.刷新一下&#xff0c;出来了 e.转存导出sql文件。 二.利用生成的数据库创建表加同步数据sql。…

汽车行业会用到python吗_无人驾驶是未来5年最具竞争行业,会python就能拿高薪!...

今天&#xff0c;无论是在硅谷还是在 BAT &#xff0c;无人驾驶技术的发展都已经势不可挡。在不久的将来&#xff0c;个人交通出行的主要方式将是成批的无人驾驶车&#xff0c;极大提升道路安全。而目前&#xff0c;无人驾驶领域的职位需求已经开始快速增长。根据腾讯研究院与 …

链表反转python

def reverse_node_list(head):if not head or not head.next:return headprev Nonewhile head:curr headhead head.nextcurr.next prevprev currreturn prev 设置三个指针&#xff0c; prev指向前一个节点&#xff0c; head 指向现在的节点&#xff0c; curr指向下一个要去…

字符串之字符判断以及字母的大小写转换

char c //给定字符c 1.isalpha© //判断是否是字母 2.isdigit© //判断是否是数字 3.islower© //判断是否是小写字母 4.isupper© //判断是否是大写字母 5.tolower© //转变成小写字母 6.touper© //转变成代写字母 至于说应用&#xff0c;看代码悟吧…

symfony api 错误响应_Postman for Mac(API管理开发软件)

Postman for Mac是一款可在Mac端运行的API管理开发软件&#xff0c;postman 下载 mac不仅可以调试简单的css、html、脚本等简单的网页基本信息&#xff0c;它还可以发送几乎所有类型的HTTP请求&#xff0c;用户可以利用Chrome插件的形式把各种模拟用户HTTP请求的数据发送到服务…

前端学习

学习整理了web缓存的一些策略&#xff0c;如有不正确的地方&#xff0c;欢迎指正。 浏览器端的缓存规则 对于浏览器端的缓存来讲&#xff0c;这些规则是在HTTP协议头和HTML页面的Meta标签中定义的。他们分别从新鲜度和校验值两个维度来规定浏览器是否可以直接使用缓存中的副本&…