[JavaScript知识库] 点击切换图片实现

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 点击切换图片实现 -> 正文阅读

[JavaScript知识库]点击切换图片实现

我用的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。