<div class="bigv">
<div class="flex" :style="{ 'transform': txStr }">
//你的內(nèi)容
</div>
</div>
setup
const transitionX = ref(0)
const txStr = computed(()=> `translateX(${-transitionX.value*317}px)`)
//317 是每個(gè)要展示的 盒子寬度
function toleft() {
const r = transitionX.value
if (r == 0) return;
transitionX.value = r-1
}
function toright() {
const r = transitionX.value
if (r == 3) return;
transitionX.value = r+1
}
切換按鈕(圖片素材自定義)
<div class="change-btn center">
<img src="@/assets/images/home/left.png" alt="" @click="toleft">
<span style="color:#107A4A">0{{transitionX+1}}</span>
<div style="width: 1px ;height: 12px;background-color: #909090;"></div>
<span>04</span>
<img src="@/assets/images/home/right.png" alt="" @click="toright">
</div>
css
.change-btn{
color: #909090;
font-size: 11px;
margin-top: 15px;
img{
width: 6.5px;
}
span{
margin: 0 11px;
};
}
.bigv{
width: 317px; //固定最外部盒子寬度
height: 179px;
margin: 0 auto;
margin-top: 15px;
position: relative;
overflow: hidden;
>div{
transition: all 0.8s;
}
}
