element 走马灯实现图片轮播

<template>

<div id="banner">

<el-carousel :height="bannerHeight + 'px'" >

<el-carousel-item v-for="item in imgList" :key="item">

<img :src="item.url" alt="">

</el-carousel-item>

</el-carousel>

</div>

</template>

<script>

export default {

name: "XXXX",

data(){

return{

// 图片地址数组

imgList:[{url:"/static/image/111.png",}

],

// 图片父容器高度

bannerHeight :1000,

// 浏览器宽度

screenWidth :0,

}

},

methods:{

setSize:function () {

// 通过浏览器宽度(图片宽度)计算高度

this.bannerHeight = 400 / 1920 * this.screenWidth;

},

mounted() {

// 首次加载时,需要调用一次

this.screenWidth = window.innerWidth;

this.setSize();

// 窗口大小发生改变时,调用一次

window.onresize = () =>{

this.screenWidth = window.innerWidth;

this.setSize();

}

</script>

<style scoped>

.el-carousel__item h3 {

color: #475669;

font-size: 14px;

opacity: 0.75;

line-height: 300px;

margin: 0;

}

.el-carousel__item:nth-child(2n) {

background-color: #99a9bf;

}

.el-carousel__item:nth-child(2n+1) {

background-color: #d3dce6;

}

img{

/*设置图片宽度和浏览器宽度一致*/

width: 100%;

height: inherit;

}

</style>

element 走马灯实现图片轮播相关推荐

javascript+css实现走马灯图片轮播器
javascript+css实现图片轮播-走马灯式该图片轮播器主要是通过改变"图片容器"(即下面html代码中的div class="innerBox")的m ...
html垂直居中走马灯,史上最全解析：4种方法制作-PPT跑马灯/走马灯图片轮播动画...
本期要点:全面解析不同场景下的跑马灯PPT图片动画技巧概要:动画精准衔接路径起点终点位置插件提高效率图文编辑:幻云PPT设计大雄董军比如我们今天要讲的跑马灯动画跑马灯动画其实是根据咱们传 ...
html5圆形图片轮播,jQuery超酷响应式圆形图片轮播图特效
mislider是一款效果非常酷的jQuery响应式圆形图片轮播图特效插件.该轮播图特效可以将图片以圆形图片显示,然后使图片无限循环形成轮播图或旋转木马特效.该轮播图插件的特点有: 使用简单在同一个 ...
android魅族轮播图,用angularjs模仿魅族官网的图片轮播功能
使用指令模仿魅族官网的图片轮播功能(angularjs中DOM操作都在指令中完成) html css .slider{ position: relative; width:900px; height: ...
基于面向对象的图片轮播（js原生代码）
无论你想走多远,你都需要不断地走下去.前端最精华的便是原生的js,这也是我们前端工程师的技术分层的重要指标,也提现这你的代码能力,开发的水平.废话不多说,进入今天的主要分享----基于面向对象思想的图 ...
html5圆形头像滚动效果,基于jQuery实现响应式圆形图片轮播特效
本文实例讲述了基于jQuery实现响应式圆形图片轮播特效代码.分享给大家供大家参考.具体如下: 运行效果截图如下: mislider是一款效果非常酷的jQuery响应式圆形图片轮播图特效插件,misl ...
html轮播图jquery,原生js和jquery实现图片轮播特效
(1)首先是页面的结构部分对于我这种左右切换式 1.首先是个外围部分(其实也就是最外边的整体wrapper) 2.接着就是你设置图片轮播的地方(也就是一个banner吧) 3.然后是一个图片组(可以 ...
JS实现图片轮播效果（自动和手动）
本次轮播效果图如下: 具有以下功能:1.自动播放(鼠标进入显示区域时停止播放) 2.左右焦点切换 3.底下小按钮切换 ps:由于很多同志反馈无法总有各种奇怪的情况,所以有需要的直接下载整个工程:JS ...
前端学习之路之图片轮播(已实现自动轮播)
前端学习之路之图片轮播近期学习了不少的前端知识和前端的一些应用,今天呢就实现了一下图片的轮播效果,话不多说. 图片轮播的本质就是类似走马灯,当用户点击指示器的时候,需要轮播的图片发生偏移就行了. 使 ...

element 走马灯实现图片轮播

element 走马灯实现图片轮播相关推荐

最新文章

热门文章