目录
1.实现效果
2.基础代码演示
2.1js代码
2.1css样式
2.3实现效果
3.实现点击切换
3.2效果图如下
3.3发现问题
3.3.1不循环
3.3.2循环
1.实现效果
2.基础代码演示
2.1js代码
<div class="out-box">
<div class="test-swiper">
<div class="swiper-box">
<div class="swiper-item" v-for="(item,index) in 7" :key="index">
<img src="" alt="">
<p>学习+积累</p>
</div>
</div>
</div>
<button class="button-one one">上一张</button>
<button class="button-one two">下一张</button>
</div>2.1css样式
.out-box{
position: relative;
width: 100%;
.test-swiper{
background-color: #d3d8e2;
width: 1200px;
margin:0 auto;
height: 500px;
position: relative;
overflow: hidden;
.swiper-box{
position: absolute;
display: flex;
.swiper-item{
width: 400px;
height: 400px;
background-color: #B7CBEA;
margin:50px 100px;
}
}
}
.button-one{
background-color: rgb(174, 165, 166);
position: absolute;
top: 50%;
width: 50px;
height: 50px;
border-radius: 100%;
}
.one{
left: 430px;
}
.two{
right:430px;
}
}2.3实现效果
3.实现点击切换
3.1给button添加事件,transform和切换效果
<div class="out-box">
<div class="test-swiper">
<div class="swiper-box" :style="{transform:`translateX(${translateXtest}px)`,transition: 'transform 0.5s ease-in-out' }">
<div class="swiper-item" v-for="(item,index) in testList" :key="index">
<img src="" alt="">
<p>学习+积累</p>
</div>
</div>
</div>
<button class="button-one one" @click="onPre">上一张</button>
<button class="button-one two" @click="onNext">下一张</button>
</div>
export defatult{
data(){
return{
testList:[{},{},{},{}]
testIndex:0
}
}
}
computed: {
translateXtest(){
// 计算需要移动的距离
return -this.testIndex * (400 + 200);
},
}
onPre(){
if(this.testIndex>0){ this.testIndex--}
},
onNext(){
if(this.testIndex<this.testList.length-1){ this.testIndex++}
}3.2效果图如下
3.3发现问题
发现数组长度只有3,当触发最后一次onNext操作时候,出现空白,如何解决
3.3.1不循环
一次显示2张图片,添加条件testIndex<testList.length-2
onNext(){
if(this.testIndex<this.testList.length-2){this.testIndex++}
}
3.3.2循环
可以当到最后显示testList最后一个数据时,让数组拼接
onNext(){
this.testIndex++
if(this.testIndex>this.testList.length){
this.testList=this.testList.concat(this.testList)
}
}4.完整代码
<div class="out-box">
<div class="test-swiper">
<div class="swiper-box" :style="{ transform:`translateX(${translateXtest}px)`,transition: 'transform 0.5s ease-in-out' }">
<div class="swiper-item" v-for="(item,index) in testList" :key="index">
<img src="" alt="">
<p>学习+积累{{ index }}</p>
</div>
</div>
</div>
<button class="button-one one" @click="onPrev">上一张</button>
<button class="button-one two" @click="onNext">下一张</button>
</div>
export defatult{
data(){
return{
testList:[{},{},{},{}]
testIndex:0
}
}
}
computed: {
translateXtest(){
// 计算需要移动的距离
return -this.testIndex * (400 + 200);
},
}
onPre(){
if(this.testIndex>0){ this.testIndex--}
},
onNext(){
if(this.testIndex<this.testList.length-2){this.testIndex++}
}
.out-box{
position: relative;
width: 100%;
.test-swiper{
background-color: #d3d8e2;
width: 1200px;
margin:0 auto;
height: 500px;
position: relative;
overflow: hidden;
.swiper-box{
position: absolute;
display: flex;
.swiper-item{
width: 400px;
height: 400px;
background-color: #B7CBEA;
margin:50px 100px;
}
}
}
.button-one{
background-color: rgb(174, 165, 166);
position: absolute;
top: 50%;
width: 50px;
height: 50px;
border-radius: 100%;
}
.one{
left: 430px;
}
.two{
right:430px;
}
}如果有好的循环方式,欢迎留言
