使用到
- VUE中的 v-for快速遍历数据
- 位置的相对计算，calc()函数，注意使用此函数时，运算符的两端必须加空格
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.min.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
#app{
height: 500px;
width: 750px;
position: absolute;
border: 2px solid #000000;
top: calc((100vh - 500px) / 2);
left: calc((100vw - 750px) / 2);
}
#app>div{
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
#app>.show{
opacity: 1;
}
#app>ul{
position: absolute;
right: 10px;
bottom: 10px;
}
#app>ul>li{
width: 20px;
height: 20px;
float: left;
margin: 0px 5px;
list-style: none;
border-radius: 10px;
border: 2px solid #FFFFFF;
background: #7F7F7F;
}
#app>ul>li:hover{
background: #FFFFFF;
border-color: #7F7F7F;
}
</style>
</head>
<body>
<div id="app">
<div
v-for="(item,index) in images"
:style="{background: 'url(' + item +')'}"
:class="{show: index===selectedIndex}"
></div>
<ul>
<li v-for="(item,index) in images" @click="changeimg(index)"></li>
</ul>
</div>
<script>
new Vue({
el:'#app',
data(){
return {
images: [
'img/111.jpg',
'img/222.jpg',
'img/333.jpg',
'img/444.jpg',
'img/555.jpg',
'img/666.jpg'
],
selectedIndex : 0
}
},
methods:{
changeimg(index){
this.selectedIndex = index
}
}
})
</script>
</body>
</html>