通过对图片数组的length取余,便捷实现无限切换,控制一个变量

两边切换按钮++ | --

点击图片 修改为当前index

 JS

<div class="works_pic" v-show="video_pic_tab == 'pic'">
    <img
     class="works_pic_big"
     v-for="(item, index) in worksPic"
     :key="index"
     :src="item"
     v-show="index == Math.abs(worksPicIndex)% worksPic.length">
    <div class="pic_control" v-if="worksPic.length">
        <span class="pic_left" @click="worksPicIndex--"></span>
        <div class="works_pic_list">
            <img 
             :class="index == Math.abs(worksPicIndex)% worksPic.length? 'works_pic_small active' : 'works_pic_small'"
             v-for="(item, index) in worksPic"
             :key="index"
             :src="item"
             @click="worksPicIndex = index">
        </div>
        <span class="pic_right" @click="worksPicIndex++"></span>
    </div>
</div>

CSS

.video_pic .works_pic {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 15px;
}
.video_pic .works_pic_big {
    max-width: 100%;
    height: 510px;
}
.video_pic .pic_control {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 20px 0px;
}
.video_pic .pic_control .pic_left,
.video_pic .pic_control .pic_right {
    display: block;
    width: 50px;
    height: 90px;
    background-image: url(~@/assets/left.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
}
.video_pic .pic_control .pic_right {
    background-image: url(~@/assets/right.png);
}
.video_pic .pic_control .works_pic_list {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    width: calc(100% - 100px);
    user-select: none;
}
.video_pic .pic_control .works_pic_list::-webkit-scrollbar {
    width: 3px;
    height: 10px;
}
.video_pic .pic_control .works_pic_list::-webkit-scrollbar-thumb {
    width: 3px;
    height: 5px;
    background: #999aaa;
    border-radius: 3px;
}
.video_pic .pic_control .works_pic_small {
    width: 150px;
    height: 90px;
    border: 3px solid #fff;
    border-radius: 5px;
}
.video_pic .pic_control .works_pic_small.active {
    border: 3px solid var(--theme-color);
}

 

Logo

前往低代码交流专区

更多推荐