预览：
思路：
源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vuejs实现图片切换‘</title>
<!-- 引入Vue开发版本的js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<style>
#app{
width: 640px;
height: 320px;
overflow: hidden;
position: relative;
margin: 0 auto;
}
.center{
width: 640px;
height: 320px;
overflow: hidden;
position: absolute;
}
.center img{
position: relative;
width: 640px;
height: 320px;
float: left;
}
.center a{
height: 55px;
width: 15px;
}
.center a .aimg{
width: 30px;
height:70px;
position: absolute;
top: 42%;
/*background-color: #2c3e50;*/
}
.center .right img{
right: 5px;
}
.center .left img{
left: 10px;
}
</style>
</head>
<body>
<div id="app">
<div class="center">
<!-- <h2 class="title">
<img src="./images/title.jpg" alt="">
虎康建材公司
</h2>-->
<!-- 图片-->
<img :src="imgArr[index]" alt="">
<!-- 左箭头-->
<a href="javascript:void(0)" v-show="index!=0" @click="prev" class="left">
<img src="./images/prev.png" alt="" class="aimg">
<!-- <-->
</a>
<!-- 右箭头-->
<a href="javascript:void(0)" v-show="index<imgArr.length-1" @click="next" class="right">
<img src="./images/next.png" alt="" class="aimg">
</a>
</div>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
message:"",
// 1、定义图片数组
imgArr:[
"./images/00.jpg",
"./images/01.jpg",
"./images/02.jpg",
"./images/03.jpg",
"./images/04.jpg",
"./images/05.jpg",
"./images/06.jpg",
"./images/07.jpg",
"./images/08.jpg",
"./images/09.jpg",
"./images/10.jpg",
],
// 2、添加图片索引
index:0,
},
methods:{
prev:function (){
this.index--;
},
next:function (){
this.index++;
}
}
})
</script>
</body>
</html>