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>

积少成多，你的努力正以你看得见和看不见的方式走来。

vue——走马灯-类轮播图相关推荐

Vue 过渡实现轮播图
Vue 过渡实现轮播图 Vue 过渡 Vue 的过渡系统是内置的,在元素从 DOM 中插入或移除时自动应用过渡效果. 过渡的实现要在目标元素上使用 transition 属性,具体实现参考Vue2 过 ...
利用swiper在vue中做轮播图，并改变轮播图的原有箭头、图片等内容
目标:利用swiper在vue中做轮播图,并改变轮播图的原有箭头.图片等内容. 实现效果:1.点击左右箭头可切换图片. 2.点击后图片出现最左侧样式效果,只有被点击的图片有此效果,不被点击恢复默认效果 ...
html新闻轮播插件,jQuery新闻类轮播图插件sliderBox
sliderBox.js是一款jQuery新闻类轮播图插件.该jQuery新闻类轮播图插件可以创建兼容ie8.带缩略图导航.以及多种过渡效果的轮播图. 使用方法在页面中引入jQuery.slider ...
vue移动端轮播图适配宽高
vue移动端轮播图适配宽高 /** 初始化轮播图的高度 */initSwipeHeight(){console.log(window.screen.width)let picw = 1242; // ...
vue 实现无限轮播_用vue写一个轮播图效果
轮播图在网站中几乎无处不在,占用地方少,交互性好.今天就来聊聊如何用vue实现一个轮播效果. 一.原理在轮播图数组dataList中,定义一个变量currentIndex = 0表示第一张图片,默认 ...
vue组件之轮播图的实现
预览地址图片的轮播假设需要轮播三张图片(1,2,3),以前的思路就如图所示,添加两个节点.通过索引(index)的切换实现组件的无缝轮播. 这种想法的确可行,而且实现出来效果还不错. 缺点在于大 ...
vue 3D旋转木马轮播图
利用carousel-3d插件. 安装 npm install -S vue-carousel-3d 全局引入 import Vue from 'vue' import Carousel3d from ...
vue写一个轮播图实例（没有自动轮播）
要点: 1.<li v-for="(item,index) in arr" v-on:click="lick(item)"><!-- 第{{i ...
Vue实现仿音乐播放器6-实现新歌速递与swiper轮播图切换
前言前面在首页已经完成今日推荐以及访问百度API获取数据,现在继续来完善home主页. 效果新歌速递 swiper实现轮播图实现实现新歌速递在components下新建新歌速递组件News_ ...

vue——走马灯-类轮播图

vue——走马灯-类轮播图相关推荐

最新文章

热门文章