vue实现轮播图效果
使用vue实现完善的轮播功能详解
·
1,实现轮左右按键轮播效果，采用数组下标指定轮播图片，定义一个dindex与index下标相比较。
2，创建轮播的图片的数组
3，实现下方圆点点击轮播图片，采用动态绑定和数组的动态样式实现未点击的白色和点击的黑色
dindex与index相比较两值相不一致就是白色反之为黑色
4，实现图片定时轮播，创建定时器，将方法放入mounted生命周期中使其定时轮播，点击按钮轮播时清除定时器
5，实现鼠标移入移出左右切换图片按钮的样式切换，使用css3中的：hover的样式
一，body， HTML代码
<body>
<div id="box">
<button id="left" @click="left">//左侧点击按钮
<
</button>
<img id="img":src="img[dindex]" >//轮播的图片采用动态绑定渲染
<button id="right" @click="right">
>
</button>
<ul>
//采用v-for循环实现圆点的动态个数渲染
<li v-for="(item,index) in img.length" @click="yuan(index)">
//不同图片的渲染
<img :src="index===dindex?'./圆点 .png':'./圆点2.png'" alt="">
</li>
</ul>
</div>
</body二，css样式
<style>
//轮播图片的位置
#box{
position: fixed;
top: 100px;
right: 150px;
}
#img{
height: 580px;
width: 1200px;
}
button{
font-size: 50px;
height: 60px;
width: 100px;
//按钮透明度设置
opacity: 0.2;
//按钮圆角设置
border-top-left-radius: 20%;
border-top-right-radius: 20%;
border-bottom-left-radius: 20%;
border-bottom-right-radius: 20%;
}
//鼠标移入样式
button:hover{
background-color: darkslategray;
}
#left{
position: fixed;
top: 350px;
left: 187px;
}
#right{
position: fixed;
top: 350px;
right: 150px;
}
ul{
list-style: none;
position: fixed;
top: 620px;
left: 700px;
}
li{
font-size: 10px;
display:inline;
}
li img{
height: 40px;
width: 40px;
}
</style>三，script功能实现代码
<script>
new Vue({
el:"#box",
data:{
//定义图片数组
img:["./nba1.png", "./nba2.png",
"./nba3.png","./nba4.png","./nba5.png","./nba.png"
],
//图片下标
dindex:0,
//定时器设定
timer:null
},
methods:{
//右侧点击按钮
right(){
clearInterval(this.timer)
if(this.dindex<this.img.length-1){
this.dindex++
}else if(this.dindex==this.img.length-1){
this.dindex=0
}
console.log(this.dindex)
},
//左侧点击按钮
left(){
clearInterval(this.timer)
if(this.dindex>0){
this.dindex--
}else if(this.dindex==0){
this.dindex=this.img.length-1
}
// console.log(this.dindex)
},
//圆角点击实现轮播效果
yuan(index){
clearInterval(this.timer)
this.dindex=index
console.log(index,this.dindex)
},
//定时器设置
starInterval(){
clearInterval(this.timer);
this.timer==setInterval(()=>{
this.dindex++
if(this.dindex>this.img.length-1){
this.dindex=0
}
},3000)
},
},
//将定时器放入mounted生命周期中
mounted(){
this.starInterval()
}
})
</script>四，整体代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./node_modules/vue/dist/vue.js"></script>
</head>
<style>
#box{
position: fixed;
top: 100px;
right: 150px;
}
#img{
height: 580px;
width: 1200px;
}
button{
font-size: 50px;
height: 60px;
width: 100px;
opacity: 0.2;
border-top-left-radius: 20%;
border-top-right-radius: 20%;
border-bottom-left-radius: 20%;
border-bottom-right-radius: 20%;
}
button:hover{
background-color: darkslategray;
}
#left{
position: fixed;
top: 350px;
left: 187px;
}
#right{
position: fixed;
top: 350px;
right: 150px;
}
ul{
list-style: none;
position: fixed;
top: 620px;
left: 700px;
}
li{
font-size: 10px;
display:inline;
}
li img{
height: 40px;
width: 40px;
}
</style>
<body>
<div id="box">
<button id="left" @click="left"><</button>
<img id="img":src="img[dindex]" alt="" @mouseenter="zymInter(true)" @mouseleave="zymInter(false)">
<button id="right" @click="right">></button>
<ul>
<li v-for="(item,index) in img.length" @click="yuan(index)"><img :src="index===dindex?'./圆点 .png':'./圆点2.png'" alt=""></li>
</ul>
</div>
</body>
<script>
new Vue({
el:"#box",
data:{
img:["./nba1.png", "./nba2.png",
"./nba3.png","./nba4.png","./nba5.png","./nba.png"
],
dindex:0,
timer:null
},
methods:{
right(){
clearInterval(this.timer)
if(this.dindex<this.img.length-1){
this.dindex++
}else if(this.dindex==this.img.length-1){
this.dindex=0
}
console.log(this.dindex)
},
left(){
clearInterval(this.timer)
if(this.dindex>0){
this.dindex--
}else if(this.dindex==0){
this.dindex=this.img.length-1
}
// console.log(this.dindex)
},
yuan(index){
clearInterval(this.timer)
this.dindex=index
console.log(index,this.dindex)
},
starInterval(){
clearInterval(this.timer);
this.timer==setInterval(()=>{
this.dindex++
if(this.dindex>this.img.length-1){
this.dindex=0
}
},3000)
},
},
mounted(){
this.starInterval()
}
})
</script>
</html>
前往低代码交流专区
更多推荐
2
0- 0
已为社区贡献1条内容
所有评论(0)