vue轮播图简单实现
通过对图片数组的length取余,便捷实现无限切换,控制一个变量两边切换按钮++ | --点击图片 修改为当前indexJS<div class="works_pic" v-show="video_pic_tab == 'pic'"><imgclass="works_pic_big"v-for="(item, index) in worksPic":key="index":src
·
通过对图片数组的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);
}
更多推荐
已为社区贡献2条内容
所有评论(0)