Vue.js轮播图走马灯代码实例（全）

/*width: 100%;*/
/*min-width: 1200px;*/
width: 1000px;
margin: 0px auto;
}

.divAdd-con {
margin: 0px auto;
width: 1000px;
overflow: auto;
padding: 30px 0px;
}

.divAdd-con img {
float: left;
}

.indexrt {
margin: 0px 40px;
}

.divAddleft img {
float: left;
margin-bottom: 7px;
}

.divAddleft {
float: left;
display: inline;
width: 370px;
}

.divAddrt {
float: right;
display: inline;
margin-top: 7px;
}

.back_add {
background-color: #ededed;
}

.divAdd-con img {
border: none;
}

a:focus,
a:hover {
color: #23527c;
}

.threeImg {
height: 158px;
background: #ededed;
border-bottom: 3px solid #4679B2;
min-width: 1000px;
}

.threeImg .Containt ul {
margin: 0 auto;
width: 2400px;
position: absolute;
left: 0px;
cursor: pointer;
height: 100%
}

.threeImg .Containt ul li {
width: 300px;
margin-right: 40px;
margin-top: 10px;
float: left;
}

.threeImg .Containt ul li img {
height: 128px;
width: 100%;
}

.Containt {
position: relative;
width: 1000px;
height: 130px;
overflow: hidden;
margin: 0 auto;
}

.iconleft {
position: absolute;
width: 20px;
height: 80px;
top: 10px;
z-index: 99999;
padding-top: 48px;
background-color: #ddd;
vertical-align: middle;
}

.iconright {
position: relative;
left: 978px;
top: 70px;
background-color: #ddd;
/*position: absolute;*/
width: 20px;
height: 80px;
top: 10px;
z-index: 99999;
padding-top: 48px;
background-color: #ddd;
vertical-align: middle;
}
</style>

 走马灯效果引用的是elementUI中的样式

<template>
 <el-carousel :interval="4000" type="card" height="200px">
 <el-carousel-item v-for="item in 6" :key="item">
  <h3>{{ 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>

轮播效果图

<template>								 
 2/3   首页 上一页 1 2 3 下一页 尾页