vue 轮播 直接复制黏贴去看吧

<template>

<div class="multiple_caeousel">

<div class="back_add">

<div class="threeImg">

<div class="Containt">

<div class="iconleft" @click="zuohua">

<i class="el-icon-arrow-left"></i>

</div>

<ul :style="{'left':calleft + 'px'}" v-on:mouseover="stopmove()" v-on:mouseout="move()">

<!-- <li v-for="(item,index) in superurl" :key="index">

<img :src="item.img" />

</li> -->

<li v-for="(o,index) in 7" :key="index">

{{index}}

</li>

</ul>

<div class="iconright" @click="youhua">

<i class="el-icon-arrow-right"></i>

</div>

</div>

</div>

</div>

 

</div>

</template>

<style lang="scss">

@import "../../../assets/css/base.scss";

 

/*超链接图片*/

.multiple_caeousel {

height: 100%;

width: calc(100% + 50px);

.back_add {

height: 100%;

width: 100%;

}

 

a:focus,

a:hover {

color: #23527c;

}

 

.threeImg {

height: 100%;

width: 100%;

background: #ededed;

min-width: 1000px;

}

 

.threeImg .Containt ul {

margin: 0 auto;

position: absolute;

// left: 0px;

cursor: pointer;

height: 100%;

width: 100%;

white-space: nowrap;

// overflow: hidden;

li {

width: calc((100% - 50px)/3);

height: 100%;

box-sizing: border-box;

padding-right: 50px;

display: inline-block;

img {

height: 100%;

width: 100%;

}

}

}

 

.Containt {

position: relative;

height: 100%;

width: 100%;

overflow: hidden;

margin: 0 auto;

}

 

.iconleft {

position: absolute;

width: 30px;

height: 70px;

top: calc((100% - 70px) / 2);

z-index: 99999;

vertical-align: middle;

background-color: #5b3e38;

opacity: 0.7;

border-radius: 0 4px 4px 0;

cursor: pointer;

}

 

.iconright {

position: absolute;

right: 50px;

height: 70px;

top: calc((100% - 70px) / 2);

background-color: #5b3e38;

width: 30px;

z-index: 99999;

vertical-align: middle;

opacity: 0.7;

border-radius: 4px 0 0 4px;

cursor: pointer;

}

}

</style>

 

<script>

export default {

data() {

return {

superurl: [

{

url: "",

img: require("../../../assets/images/header-module1.png")

},

{

url: "",

img: require("../../../assets/images/header-module2.png")

},

{

url: "",

img: require("../../../assets/images/header-module3.png")

},

{

url: "",

img: require("../../../assets/images/header-module4.png")

},

{

url: "",

img: require("../../../assets/images/header-module2.png")

},

{

url: "",

img: require("../../../assets/images/header-module1.png")

}

],

calleft: 0,

leftnum:400

};

},

created() {

this.move();

},

methods: {

//移动

move() {

this.timer = setInterval(this.starmove, 2500);

},

//开始移动

starmove() {

this.calleft -= this.leftnum;

if (this.calleft < -1600) {

// this.calleft =(data.lenght - 3)*this.leftnum

this.calleft = 0;

}

},

//鼠标悬停时停止移动

stopmove() {

clearInterval(this.timer);

},

//点击按钮左移

zuohua() {

this.calleft -= this.leftnum;

if (this.calleft < -1600) {

// this.calleft =(data.lenght - 3)*this.leftnum

this.calleft = 0;

}

},

//点击按钮右移

youhua() {

this.calleft += this.leftnum;

if (this.calleft > 0) {

this.calleft = -1600;

// this.calleft =(data.lenght - 3)*this.leftnum

}

}

}

};

</script>