轮播(css+js)

目录

1.实现效果

2.基础代码演示

2.1js代码

2.1css样式

2.3实现效果

3.实现点击切换

3.1给button添加点击事件

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;
  }
}

如果有好的循环方式,欢迎留言

相关推荐
Face几秒前
事件循环
前端·javascript
ONE_Gua3 分钟前
chromium魔改——navigator.webdriver 检测
前端·后端·爬虫
CodePencil3 分钟前
CSS专题之盒模型
前端·css
谦谦橘子3 分钟前
服务端渲染原理解析
前端·javascript·react.js
carterwu4 分钟前
umi+模块联邦-配置指南
前端
Mintopia4 分钟前
深入理解 Three.js 中的 PerspectiveCamera
前端·javascript·three.js
无名之逆10 分钟前
Rust 开发提效神器:lombok-macros 宏库
服务器·开发语言·前端·数据库·后端·python·rust
Dontla37 分钟前
函数柯里化(Currying)介绍(一种将接受多个参数的函数转换为一系列接受单一参数的函数的技术)
前端·javascript
xixixin_40 分钟前
为什么 js 对象中引用本地图片需要写 require 或 import
开发语言·前端·javascript
uhakadotcom41 分钟前
Zustand状态管理库:轻量级、高效的React解决方案
前端·javascript·面试