template里面的代码:
<template>
<div class="box">
<!--这里是轮播图的图标 -->
<img :src="require(`@/assets/image/${dataList[indexOf].picture}`)" @mouseenter="sbxh()" @mouseout="lksb()" alt="">
<!-- 这里是轮播图的下一张 -->
<button class="lubo-btn1" @click="btnOne(0)"><</button>
<!-- 这里是轮播图的下一张 -->
<button class="lubo-btn2" @click="btnOne(1)">></button>
<ul class="asd">
<!-- 绑定样式-这里是原点,原点的样式 -->
<li v-for="(item,index) in dataList" :key="item.id" :class="indexOf == index ?'ative':' ' "></li>
</ul>
</div>
</template>
JavaScript的代码
<script>
export default {
// 这里是轮播的组件名称
name: "lbtu",
// 这里是轮播的图的数据
data() {
return {
// 这里是切换下一张和上一张数据,用来判断是那一张图的显示给原点添加样式
indexOf:0,
// 这里用来保存定时器的
time:null,
}
},
// 父组件的传参的接受
props:{
// 这里和父组件的传的 xxx ="qqq"或者:xxx = "qqq" 和这里的xxx一样的名字
dataList:Array
},
methods:{
// 轮播图的切换
btnOne(e){
// 判断传的值为1
if(e==1){
// 如果数组(dataList)的长度 等于 indexOf这个值就执行indexOf=0,如果不为不相等则执行indexOf=indexOf+1
this.indexOf = this.dataList.length==this.indexOf? 0:this.indexOf+1
// 或者是e==0
}else if(e==0){
// 如果这个 indexOf=0这个值就执行indexOf=this.dataList.length (这个数组的长度为),如果不为不相等则执行indexOf=indexOf-1
this.indexOf = this.indexOf==0?this.dataList.length-1:this.indexOf-1
}
},
setert(){
// 这里要用箭头符号,没有箭头指向这里指向不对,如果用箭头符号走向对了
this.time= setInterval(()=>{
// 调用轮播图的切换的效果的方法`
this.btnOne(1);
},1000)
},
// 鼠标悬停
sbxh(){
// 清除定时器
clearInterval(this.time);
// 定时器的time为空
this.time ="";
},
// 鼠标离开事件
lksb(){
// 判断time的长度为空,如果为空则
if(this.time.length ==0){
// 调用setert函数
this.setert();
}
}
},
// mounted, 钩子函数:等待vue的页面加载完成,执行这个函数
mounted(){
this.setert();
}
}
</script>
style里面的代码:
<style lang="less" scoped> .box { width: 1200px; height: 400px; margin: auto; position: relative; img{ width: 1200px; height: 400px; } .lubo-btn1,.lubo-btn2{ position: absolute; width: 60px; height: 50px; z-index: 999; border-radius: 10px; border: 0px; font-size: 20px; background-color: rgba(99, 99, 99, 0.5); } .lubo-btn1 { top: 50%; left: 20px; } .lubo-btn2 { top: 50%; right: 20px; } .asd { width: 100px; height: 20px; display: flex; position: absolute; bottom: 20px; left: 50px; justify-content: space-between; li { list-style: none; width: 20px; height: 20px; background-color: rgba(0, 0, 0, 0.5); border-radius: 20px; } } } .ative { background-color: red !important; } </style>