vue3手动封装一个点击滚动，左右切换的商品展示效果图，纯js

最新推荐文章于 2024-06-29 15:18:41 发布

️小圆子

最新推荐文章于 2024-06-29 15:18:41 发布

阅读量2.1k

点赞数 1

文章标签： javascript 前端

本文链接：https://blog.csdn.net/qq_55681529/article/details/131247447

版权

展示效果

效果图如下，默认展示第一张图片，只有两边有按钮切换，也可以点击图片切换

点击的图片从第三个开始时居中显示

分析一波

从底部的第三张图片开始到末尾的第八张图片都是居中显示。点击左右要进行切换，也要居中显示。所以我在这里用的的时在X轴上进行平移来进行实现。

过程

我是以十张图片为例子：

body部分代码

imgs里面的类容是上面的显示大图，用v-if来判断是否显示。

imgs2里面是下面控制的显示的小图，自定义class类名，主要根据这个类名进行判断是否显示当前点击的图片。

给imgs2的父节点绑定点击事件：@click=zhanshi

 <div class="detail">
          <div>
            <div class="imgs">
              <img
                v-if="index == 1"
                src="https://pic1.ajkimg.com/display/anjuke/36b903-%E6%88%BF%E6%88%BF%E9%80%9A%E6%88%BF%E5%9C%B0%E4%BA%A7/9f212ffe4ef6210c6a478b7c6d37f90d-800x650.jpg?frame=1"
                alt=""
              />
              <img
                v-else-if="index == 2"
                src="https://pic1.ajkimg.com/display/anjuke/36b903-%E6%88%BF%E6%88%BF%E9%80%9A%E6%88%BF%E5%9C%B0%E4%BA%A7/9f212ffe4ef6210c6a478b7c6d37f90d-800x650.jpg?frame=1"
                alt=""
              />
              <img
                v-else-if="index == 3"
                src="https://pic1.ajkimg.com/display/anjuke/11d225-%E6%88%BF%E6%88%BF%E9%80%9A%E6%88%BF%E5%9C%B0%E4%BA%A7/971db4bdcae486d82c3fc22968303303-800x650.jpg?frame=1"
                alt=""
              />
              <img
                v-else-if="index == 4"
                src="https://pic1.ajkimg.com/display/anjuke/add4c1-%E6%88%BF%E6%88%BF%E9%80%9A%E6%88%BF%E5%9C%B0%E4%BA%A7/91ddb254a4154fbc576120d6ab917515-800x650.jpg?frame=1"
                alt=""
              />
              <img
                v-else-if="index == 5"
                src="https://pic1.ajkimg.com/display/anjuke/f7167c-%E6%88%BF%E6%88%BF%E9%80%9A%E6%88%BF%E5%9C%B0%E4%BA%A7/57311e438d4977c7ce1f8c8fbe49c01b-800x650.jpg?frame=1"
                alt=""
              />
              <img
                v-else-if="index == 6"
                src="https://pic1.ajkimg.com/display/anjuke/6dd413-%E6%88%BF%E6%88%BF%E9%80%9A%E6%88%BF%E5%9C%B0%E4%BA%A7/e834ff8faf4c1e4fd53e09229293913e-800x650.jpg?frame=1"
                alt=""
              />
              <img
                v-else-if="index == 7"
                src="https://pic1.ajkimg.com/display/anjuke/4be035-%E6%88%BF%E6%88%BF%E9%80%9A%E6%88%BF%E5%9C%B0%E4%BA%A7/c6712ca73a7a5bea397760189791f6ea-800x650.jpg?frame=1"
                alt=""
              />
              <img
                v-else-if="index == 8"
                src="https://pic1.ajkimg.com/display/anjuke/0ae9e5-%E6%88%BF%E6%88%BF%E9%80%9A%E6%88%BF%E5%9C%B0%E4%BA%A7/cbd662e82bb68d247f3405dd5f5f01bc-800x650.jpg?frame=1"
                alt=""
              />
              <img
                v-else-if="index == 9"
                src="https://pic1.ajkimg.com/display/anjuke/6c7b2e-%E6%88%BF%E6%88%BF%E9%80%9A%E6%88%BF%E5%9C%B0%E4%BA%A7/2f14341af2fe8c08a11c23e2575a74a0-800x650.jpg?frame=1"
                alt=""
              />
              <img
                v-else-if="index == 10"
                src="https://pic1.ajkimg.com/display/anjuke/424ebf-%E6%88%BF%E6%88%BF%E9%80%9A%E6%88%BF%E5%9C%B0%E4%BA%A7/ca1cb31cd00ca7dfcc0a1c5ad9e3887d-800x650.jpg?frame=1"
                alt=""
              />
            </div>
            <div class="left_imgs" @click="zhanshi">
              <div class="icons" style="margin-right: 5px">
           &lt;
              </div>
              <div class="imgs2">
                <img
                  class="1"
                  src="https://pic1.ajkimg.com/display/anjuke/36b903-%E6%88%BF%E6%88%BF%E9%80%9A%E6%88%BF%E5%9C%B0%E4%BA%A7/9f212ffe4ef6210c6a478b7c6d37f90d-800x650.jpg?frame=1"
                  alt=""
                />
                <img
                  class="2"
                  src="https://pic1.ajkimg.com/display/anjuke/36b903-%E6%88%BF%E6%88%BF%E9%80%9A%E6%88%BF%E5%9C%B0%E4%BA%A7/9f212ffe4ef6210c6a478b7c6d37f90d-800x650.jpg?frame=1"
                  alt=""
                />
                <img
                  class="3"
                  src="https://pic1.ajkimg.com/display/anjuke/11d225-%E6%88%BF%E6%88%BF%E9%80%9A%E6%88%BF%E5%9C%B0%E4%BA%A7/971db4bdcae486d82c3fc22968303303-800x650.jpg?frame=1"
                  alt=""
                />
                <img
                  class="4"
                  src="https://pic1.ajkimg.com/display/anjuke/add4c1-%E6%88%BF%E6%88%BF%E9%80%9A%E6%88%BF%E5%9C%B0%E4%BA%A7/91ddb254a4154fbc576120d6ab917515-800x650.jpg?frame=1"
                  alt=""
                />
                <img
                  class="5"
                  src="https://pic1.ajkimg.com/display/anjuke/f7167c-%E6%88%BF%E6%88%BF%E9%80%9A%E6%88%BF%E5%9C%B0%E4%BA%A7/57311e438d4977c7ce1f8c8fbe49c01b-800x650.jpg?frame=1"
                  alt=""
                />
                <img
                  class="6"
                  src="https://pic1.ajkimg.com/display/anjuke/6dd413-%E6%88%BF%E6%88%BF%E9%80%9A%E6%88%BF%E5%9C%B0%E4%BA%A7/e834ff8faf4c1e4fd53e09229293913e-800x650.jpg?frame=1"
                  alt=""
                />
                <img
                  class="7"
                  src="https://pic1.ajkimg.com/display/anjuke/4be035-%E6%88%BF%E6%88%BF%E9%80%9A%E6%88%BF%E5%9C%B0%E4%BA%A7/c6712ca73a7a5bea397760189791f6ea-800x650.jpg?frame=1"
                  alt=""
                />
                <img
                  class="8"
                  src="https://pic1.ajkimg.com/display/anjuke/0ae9e5-%E6%88%BF%E6%88%BF%E9%80%9A%E6%88%BF%E5%9C%B0%E4%BA%A7/cbd662e82bb68d247f3405dd5f5f01bc-800x650.jpg?frame=1"
                  alt=""
                />
                <img
                  class="9"
                  src="https://pic1.ajkimg.com/display/anjuke/6c7b2e-%E6%88%BF%E6%88%BF%E9%80%9A%E6%88%BF%E5%9C%B0%E4%BA%A7/2f14341af2fe8c08a11c23e2575a74a0-800x650.jpg?frame=1"
                  alt=""
                />
                <img
                  class="10"
                  src="https://pic1.ajkimg.com/display/anjuke/424ebf-%E6%88%BF%E6%88%BF%E9%80%9A%E6%88%BF%E5%9C%B0%E4%BA%A7/ca1cb31cd00ca7dfcc0a1c5ad9e3887d-800x650.jpg?frame=1"
                  alt=""
                />
              </div>
              <div class="icons2" style="margin-left: 10px">
                >
              </div>
            </div>
          </div>
          <div>2</div>
        </div>

初始化元素

before是用保存点击图片的前一次的类名，用来跟这一次的做比较，以此来得出位移的距离

flag是用来判断是否点击过了，主要是用来判断是不是第一次点击class为5，因为它的位移要多一倍。

num是点击一次左边按钮或者右边按钮来进行自增自减，以此控制图片的切换

let before = ref(3)
let flag = ref(false)
let num=ref(1)

黑框显示，控制图片的显示

js代码：点击下面的小图还要出现一个黑框框，我们用if排除掉imgs2父节点的其他children。保证我们得到的imgs2，再找出imgs2的children。

显示当前点击的图片，出现黑框。主要用到排他法，找到imgs2的所有孩子节点，利用for循环把所有的黑框都去掉；结束后再单独给当前点击的节点添加黑框。

// 点击的img图片
  if (
    e.target.className != 'detail' &&
    e.target.className != 'left_imgs' &&
    e.target.className != 'imgs2'&&e.target.className!="icons"&&e.target.className!="icons2"
  ) {
   // index.value用来获取点击的类型，在body中渲染元素
   index.value = e.target.className * 1;
    num.value=e.target.className*1;
    let nodes = e.target.parentNode.children
    for (let i = 0; i < nodes.length; i++) {
      let box = document.getElementsByClassName(nodes[i].className)[0]
      box.style.border = '0'
    }
    box.style.border = '2px solid #000'
  }

位移的计算，点击图片部分

从第三个开始和第八个都是居中显示，用个if进行判断，其余节点就不会进行位移。

// img部分 用before来控制位移的距离，这一次-前一次=before，用位移的距离*before
  if ((e.target.className * 1 >= 3 && e.target.className * 1 < 9)) {
// 首次进去，判断首次是不是点击的类名为5的，为5整体向前移动294px
    if (e.target.className * 1 != 5 || flag.value) {
      flag.value = true
// 上一次的值为10的话，这次为7.我们最开始定义的就是8为最后一个中间值，before只用移动一次就可以了
      if(before.value==10&&e.target.className*1==7){
        before.value=-1;
      }else 
// 这次的类型是8，上一次的是9或者10，就不用移动
if((e.target.className*1==8&&before.value==9)||(e.target.className*1==8&&before.value==10)||(e.target.className*1==8&&before.value==10)){
        before.value=0
      }else 
// 一排我们能看见的只有五个元素，第三个为中心，最大也只能向左或者向右移动两次，大于的2次的情况比如说上一次点击的是1，这次点击的是5，差值为4，但是根本就移动不能那么多次。
if(Math.abs(e.target.className-before.value)>=2){
        if(e.target.className-before.value<0){
          before.value=-2
        }else{
          before.value=2
        }
      }else{
        before.value=e.target.className-before.value;
      }
      for (let j = 1; j <= 10; j++) {
        let box = document.getElementsByClassName(j + '')[0]
        let n = document.defaultView
          .getComputedStyle(box, null)
          .transform.substring(7)
          .split(',')[4]
        if (n) {
       box.style.transform = `translateX(${
            -1 * 147 * before.value+ n * 1
          }px)`
        } else {
// 第三次是不需要移动的
          if (e.target.className * 1 == 3) {
            box.style.transform = `translateX(0)`
          } else {
            box.style.transform = `translateX(-147px)`
          }
        }
      }
      before.value = e.target.className * 1;
    }
// 类型为5，把flag重新赋值，每一个节点都向前移动294的排序
  else {
      flag.value = true
      for (let j = 1; j <= 10; j++) {
        let box = document.getElementsByClassName(j + '')[0]
// n用来得到元素的transition的translateX的值
        let n = document.defaultView
          .getComputedStyle(box, null)
          .transform.substring(7)
          .split(',')[4]
// 用位移就用上一次的位移值加上这次的
        if (n) {
          box.style.transform = `translateX(-${294 - n * 1}px)`
        } else {
          box.style.transform = `translateX(-294px)`
        }
      }
// 操作执行完了之后，把这次的类型赋值给before，方便下次计算
      before.value = e.target.className * 1;
    }
  }

位移的计算，点击左右按钮部分

// 判断是不是点击的左右两边的按钮    
if((e.target.className=="icons2"||e.target.className=='icons')){
// 判断点击的右边按钮
    if(e.target.className=="icons2"){
// 点击就自增
      num.value=++num.value;
      flag.value=true;
// 判断不能超过最大值 10，超过就轮回到第一张
      if(num.value==11){
        num.value=1;
// 每一图片都要移动，所有用个for 循环
        for (let j = 1; j <= 10; j++) {
        let box = document.getElementsByClassName(j + '')[0]
          box.style.transform = `translateX(0)`
      }
      }else{
        if ((num.value > 3 && num.value < 9))
        for (let j = 1; j <=10; j++) {
        let box = document.getElementsByClassName(j + '')[0]
        let n = document.defaultView
          .getComputedStyle(box, null)
          .transform.substring(7)
          .split(',')[4];
        if (n) {
             box.style.transform = `translateX(${
            -147 + n * 1
          }px)`
        } else{
          box.style.transform = `translateX(${
            -147
          }px)`
        }
      }
      }
// 判断是不是点击的左边按钮
    }else if(e.target.className=="icons"){
      flag.value=true;
      num.value=--num.value
      console.log(num.value,before.value);
      if(num.value!=8&&before.value!=9){
        if(num.value==0){
        num.value=10;
        for (let j = 1; j <= 10; j++) {
        let box = document.getElementsByClassName(j + '')[0]
          box.style.transform = `translateX(-735px)`
      }
      }else{
        if ((num.value > 3 && num.value < 9))
           for (let j = 1; j <= 10; j++) {
        let box = document.getElementsByClassName(j + '')[0]
        let n = document.defaultView
          .getComputedStyle(box, null)
          .transform.substring(7)
          .split(',')[4];
          if(num.value==10){
            n=0;
          }
        if (n) {
          box.style.transform = `translateX(${147 + n * 1}px)`
        }else
        if(num.value==7)
          box.style.transform = `translateX(${147}px)`
        }
      }
      }
    }
// 把自增的值赋给index，以此来展示对应的图片
    index.value=num.value;
// 把自增过后的类名赋值给before，用来保存上一次的值，如果点完按钮再进去点击图片会有个参照
    before.value=num.value;
    let box2=document.getElementsByClassName(num.value+'')[0];   
    let nodes = e.target.parentNode.children[1].childNodes
    for (let i = 0; i < nodes.length; i++) {
      let box = document.getElementsByClassName(nodes[i].className)[0]
      box.style.border = '0'
    }
    box2.style.border = '2px solid #000'

  }