使用vue实现一个简单的图片切换器

效果展示

默认显示第一张图片，当图片为第一张时，隐藏左侧（上一张）按钮

点击左侧/右侧按钮来切换图片（上一张/下一张）

当显示到最后一张图片时，隐藏右侧（下一张）按钮

image.png

代码

html部分

    
    
    
    


    

        
        
<
        
>
    
    
    

css部分

#app{
    position: relative;
    margin: 50px auto;
    padding: 0;
    width: 500px;
    height: 300px;
}
#app img{
    width: 500px;
    height: 300px;
}

.button{
    position: absolute;
    width: 30px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    top: 50%;
    margin-top: -25px;
    border: 1px solid #fff;
    opacity: 0.3;
    cursor: pointer;
    color: #fff;
    background: black;
}

#right{
    left: 100%;
    margin-left: -30px;
}

原理讲解

data中的pics是存放图片的数组，这里存放的是文件名（含后缀），order即为数组下标，用来索引图片，默认值为0（显示第一张）

methods中的两个方式分别为绑定在左右按钮的上一张，下一张的功能函数，这里通过控制order的增减来切换图片。
注意：这里之所以不用判定order是否越界（即出现索引小于0，或超出数组长度的情况），是因为在设计按钮的时候控制了按钮的显现，即当显示第一张或最后一张图片时，左/右侧按钮不显示，按钮不显示，当然也不会触发点击事件，自然也不会出现索引越界的情况。

使用x-show指令来控制按钮的显现

        
<
        
>