html部分
<div class="regional-services-list" style="overflow: hidden;" @mouseenter="stopCar()" @mouseleave="starCar()">
<div class="preIcon" @click="preChange()"> <i class="el-icon-arrow-left"></i> </div>
<div class="nextIcon" @click="nextChange()"> <i class="el-icon-arrow-right"></i> </div>
<div style="overflow: hidden;display: inline-block;height: 146px;">
<ul class="qflb" :style="{'left':leftNum+'px'}" :class="{'transition':isTransition}">
<li
v-for="(item, index) in regionalServicesList"
:key="index"
class="regional-services-item"
@click="toBlogrollUrl(item)"
>
<a
class="regional-services-link"
href="javascript:;"
>
<img class="regional-services-img" :src="item.imgpath" alt="" />
</a>
</li>
<li
v-for="(ele, i) in regionalServicesList"
:key="i+6"
class="regional-services-item"
@click="toBlogrollUrl(ele)"
>
<a
class="regional-services-link"
href="javascript:;"
>
<img class="regional-services-img" :src="ele.imgpath" alt="" />
</a>
</li>
</ul>
</div>
</div>
css部分：
.regional-services-list{
background: #fff;
box-sizing: border-box;
padding: 51px 52px 51px 54px;
box-shadow: 0px 0px 20px rgba(38,118,168,8%);
border-radius: 8px;
position: relative;
&:hover{
.preIcon,.nextIcon{
display: block;
}
}
}
.preIcon,.nextIcon{
width: 36px;
height: 36px;
border-radius: 20px;
text-align: center;
line-height: 36px;
position: absolute;
display: none;
font-size: 16px;
background-color: rgba(0, 0, 0, 0.1);
cursor: pointer;
z-index: 99;
color: #fff;
top: 50%;
font-weight: bold;
transform: translateY(-50%);
&:hover{
background-color: rgba(0, 0, 0, 0.2);
}
}
.preIcon{
left: 10px;
}
.nextIcon{
right: 10px;
}
.regional-services-item{
width: 330px;
height: 128px;
display: inline-block;
margin-right: 52px;
vertical-align: top;
&:last-child{
margin-right: 0;
}
}
.regional-services-link{
display: block;
}
.regional-services-img{
width: 100%;
height: 100%;
cursor: pointer;
}
.regional-services-head{
margin-bottom: 40px;
}
js部分：
created() {
this.starCar();
}，
destroyed(){
this.stopCar();
},
methods:{
starCar(){
this.iconTime = setInterval(()=>{
this.leftNum -=382;
if (this.leftNum<=-382*(this.regionalServicesList.length+1)) {
this.isTransition = false;
this.leftNum = 0;
}else{
this.isTransition = true;
}
},3000)
},
stopCar(){
clearInterval(this.iconTime);
},
nextChange(){
if (this.leftNum<=-382*(this.regionalServicesList.length)) {
this.isTransition = false;
this.leftNum = 0;
setTimeout(()=>{
this.isTransition = true;
this.leftNum -=382;
})
}else{
this.isTransition = true;
this.leftNum -=382;
}
},
preChange(){
if (this.leftNum<0) {
this.isTransition = true;
this.leftNum +=382;
}else{
this.isTransition = false;
this.leftNum=-382*(this.regionalServicesList.length)
setTimeout(()=>{
this.isTransition = true;
this.leftNum +=382;
})
}
},
}