点击切换图片实现
我用的Vue+js，在html页面中实现的一个点击可以进行切换图片。实现也很简单，没学过也可以直接用。效果如下：点击左右两边箭头就能实现首先你需要在html中加入这句<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>我放在了head中。然后就可以开始搞了，代码如下：<b
·
我用的Vue+js，在html页面中实现的一个点击可以进行切换图片。实现也很简单，没学过也可以直接用。效果如下：
点击左右两边箭头就能实现
首先你需要在html中加入这句
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
我放在了head中。
然后就可以开始搞了，代码如下：
<body>
<div id="mask">
<div class="center">
<!-- 图片-->
<img :src="imgArr[index]" alt="">
<!-- 左箭头-->
<a href="javascript:void(0)" v-show="index!=0" @click="prev" class="left">
<img src="./img/left.png" style="width: 50px;float: left;" alt="">
</a>
<!-- 右箭头-->
<a href="javascript:void(0)" v-show="index<imgArr.length-1" @click="next" class="right">
<img src="./img/right.png" style="width: 50px;float: right;" alt="">
</a>
</div>
</div>
<script>
var mask=new Vue({
el:"#mask",
data:{
imgArr:[
// 建立一个img，放上图片
"./img/img.png",
"./img/img_1.png",
"./img/img_2.png",
"./img/img_3.png",
"./img/img_4.png",
],
index:0
},
methods:{
prev:function(){
this.index--;
},
next:function (){
this.index++;
},
},
})
</script>
</body>以上就是全部代码， 我搞的也比较简单，没有加什么样式，可以自行更改，还有要注意图片路径，我一开始老出不来，然后发现图片路径全是错的emmm。
前往低代码交流专区
更多推荐
2
0- 0
已为社区贡献1条内容
所有评论(0)