Vue 3D轮播 带缩略图 版本 （+动画 翻卡）

前言

用Vue来写了 移动端 3D轮播 带缩略图  ,在加 动画翻卡效果  ，其实也不是太难吧，也就做了一下午，哈哈，

船到桥头自然直，这样才可以，

首先看下做好的效果图

可以 点击 滑动 ，可以触摸滑动， 可以点击 缩略图滑动， 最后 在点击那个 选中的 翻卡的 那个有翻卡 的3D效果

代码：

<template>
  <section class="container">
    <div id="slide" class="slide index-slide">
      <!-- 轮播图片数量可自行增减 -->
      <div
        class="img back"
        v-for="(item,index) in imgsList"
        :key="index + ‘-img‘"
        :class="‘img‘+ (index+1) "
        :ref="‘imgs‘+(index)"
        :id="‘img‘+(index)"
      >
        <img :src="item.img" :ref="‘innderImgs‘+(index)">
      </div>
      <div
        class="img front"
        v-for="(item,index) in imgFront"
        :key="index"
        :class="‘img‘+ (index+1) "
        :ref="‘img‘+(index)"
        :id="(index)"
        @click="clickFan(index) "
      >
        <img :src="item" :ref="‘innderImg‘+(index)">
      </div>
    </div>
    <div class="slide-bt">
      <img
        :src="item.img"
        v-for="(item,index) in imgsList"
        :key="index"
        @click="smallPhotoClick(index)"
        :ref="‘li‘+(index)"
      >
    </div>
  </section>
</template>

<script>
import reverse_card from "../../assets/images/card/reverse_card.png";
export default {
  name: "error",
  data() {
    return {
      imgsList: [
        {
          img: "http://img1.qq.com/news/pics/16678/16678931.jpg",
          isSelect: false
        },
        {
          img: "http://img1.gtimg.com/comic/pics/25615/25615217.jpg",
          isSelect: false
        },
        {
          img: "http://img1.gtimg.com/comic/pics/25615/25615214.jpg",
          isSelect: false
        },
        {
          img:
            "https://quickbassdev.oss-cn-shanghai.aliyuncs.com/saas/merchant/2645/191120143413l2DQIkYV",
          isSelect: false
        },
        {
          img:
            "https://quickbassdev.oss-cn-shanghai.aliyuncs.com/saas/merchant/2645/1911181823465btd9sxZ",
          isSelect: false
        },
        {
          img:
            "https://cdndaily.quickbass.com/o2o/merchant/2645/190912152050_JPjFgap!s200",
          isSelect: false
        }
      ],
      imgFront: [],
      slideNub: 6,
      isTurm: false
    };
  },
  beforeCreate() {
    this.$loading.open();
  },
  mounted() {
    let vm = this;
    this.$nextTick(() => {});
    setTimeout(() => {
      this.$loading.close();
    }, 300);

    this.getImg();
    // this.slideLi();
    // this.k_touch();
  },
  methods: {
    getImg() {
      // if (this.slideNub > 5) {
      //   this.$refs.img5[0].className = "img back img5";
      // }
      for (var i = 0; i < this.slideNub; i++) {
        this.imgFront.push(reverse_card);
      }
      setTimeout(() => {
        if (this.slideNub > 5) {
          console.log(this.$refs.img5);
          this.$refs.img5[0].className = "img front img5";
          this.slideLi();
          this.k_touch();
        }
      }, 200);
    },

    //右滑动
    right() {
      let _this = this;
      var fy = new Array();
      for (var i = 0; i < this.slideNub; i++) {
        let gv = "img" + i;
        fy[i] = this.$refs[gv][0].className;
      }
      for (var i = 0; i < this.slideNub; i++) {
        let gv = "img" + i;
        if (i == 0) {
          this.$refs[gv][0].className = fy[this.slideNub - 1];
        } else {
          this.$refs[gv][0].className = fy[i - 1];
        }
      }
      this.slideLi();
    },

    //左滑动
    left() {
      let _this = this;
      var fy = new Array();
      for (var i = 0; i < this.slideNub; i++) {
        let gv = "img" + i;
        fy[i] = this.$refs[gv][0].className;
      }
      for (var i = 0; i < this.slideNub; i++) {
        let gv = "img" + i;
        if (i == this.slideNub - 1) {
          this.$refs[gv][0].className = fy[0];
        } else {
          this.$refs[gv][0].className = fy[i + 1];
        }
      }

      this.slideLi();
    },
    //轮播图片左右图片点击翻页
    imgClickFy() {
      let _this = this;
      let slideList = 0;
    },
    clickFan(id) {
      let _this = this;
      let slideList = 0;
      for (var i = 0; i < this.slideNub; i++) {
        this.$refs["innderImg" + i][0].className = "";
        let gv = "img" + i;
        if (this.$refs[gv][0].className == "img front img3") {
          slideList = parseInt(this.$refs[gv][0].id);
          // 点击选中那个
          if (slideList == id) {
            this.$refs[gv][0].className = "img front img3 fan-front";
            this.$refs["imgs" + slideList][0].className =
              "img back img3 fan-back";
            //this.$refs["innderImg" + slideList][0].className = "img-fan";

            setTimeout(() => {
              // 还原 图片初始
              this.$refs[gv][0].className = "img front img3";
              this.$refs["imgs" + slideList][0].className = "img back img3";
            }, 2000);
          }
        }
      }
      var tzcs = id - slideList;
      if (tzcs > 0) {
        for (var i = 0; i < tzcs; i++) {
          setTimeout(function() {
            _this.right();
          }, 1);
        }
      }
      if (tzcs < 0) {
        tzcs = -tzcs;
        for (var i = 0; i < tzcs; i++) {
          setTimeout(function() {
            _this.left();
          }, 1);
        }
      }
      this.isTurm = !this.isTurm;
    },

    //轮播按钮点击翻页
    smallPhotoClick(id) {
      let _this = this;
      let slideList = 0;
      for (var i = 0; i < this.slideNub; i++) {
        let gv = "img" + i;
        console.log(this.$refs[gv][0].className);
        if (this.$refs[gv][0].className == "img front img3") {
          slideList = parseInt(this.$refs[gv][0].id);
        }
      }
      var tzcs = id - slideList;
      if (tzcs > 0) {
        for (var i = 0; i < tzcs; i++) {
          setTimeout(function() {
            _this.right();
          }, 1);
        }
      }
      if (tzcs < 0) {
        tzcs = -tzcs;
        for (var i = 0; i < tzcs; i++) {
          setTimeout(function() {
            _this.left();
          }, 1);
        }
      }
      _this.slideLi();
    },
    //修改当前最中间图片对应按钮选中状态
    slideLi() {
      var slideList = 0;
      for (var i = 0; i < this.slideNub; i++) {
        let gv = "img" + i;
        if (this.$refs[gv][0].className == "img front img3") {
          slideList = parseInt(this.$refs[gv][0].id);
          // slideList = parseInt(this.$refs[gv][0].id) + 1;
        }
      }
      for (var i = 0; i < this.slideNub; i++) {
        let gv = "li" + i;
        this.$refs[gv][0].className = "";
      }

      if (slideList == 6) {
        slideList = 0;
      }
      this.$refs["li" + slideList][0].className = "on";
    },
    //触摸滑动模块
    k_touch() {
      let _this = this;
      var _start = 0,
        _end = 0,
        _content = document.getElementById("slide");
      _content.addEventListener("touchstart", touchStart, false);
      _content.addEventListener("touchmove", touchMove, false);
      _content.addEventListener("touchend", touchEnd, false);
      function touchStart(event) {
        var touch = event.targetTouches[0];
        _start = touch.pageX;
      }
      function touchMove(event) {
        var touch = event.targetTouches[0];
        _end = _start - touch.pageX;
      }

      function touchEnd(event) {
        if (_end < -100) {
          _this.left();
          _end = 0;
        } else if (_end > 100) {
          _this.right();
          _end = 0;
        }
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
}
.slide {
  width: 100%;
  overflow: hidden;
  position: relative;
  height: 9.38rem;

  perspective: 500;
  -webkit-perspective: 500; // 3D
}
.back {
  transform: rotateY(-180deg);
}
.fan-front {
  transform: rotateY(-180deg);
}
.fan-back {
  transform: rotateY(-360deg);
}
.slide .img {
  overflow: hidden;
  position: absolute;
  transition: width 0.4s, height 0.4s, top 0.4s, left 0.4s, z-index 0.4s;
  -webkit-perspective: 10000;
  backface-visibility: hidden;
  transition: all 1s;
}
.slide .img img {
  width: calc(100% - 14px);
  height: calc(100% - 14px);
  margin: 7px;
}
.slide .img1 {
  width: 40%;
  height: 40%;
  top: 30%;
  left: -110%;
  z-index: 1;
  opacity: 0.4;
}
.slide .img2 {
  width: 60%;
  height: 60%;
  top: 20%;
  left: -50%;
  z-index: 2;
  opacity: 0.4;
}
.slide .img3 {
  width: 80%;
  height: 80%;
  top: 10%;
  left: 10%;
  z-index: 3;
}
.slide .img4 {
  width: 60%;
  height: 60%;
  top: 20%;
  left: 90%;
  z-index: 2;
  opacity: 0.4;
}
.slide .img5 {
  width: 40%;
  height: 40%;
  top: 30%;
  left: 150%;
  z-index: 1;
  opacity: 0.4;
}
button {
  width: 50px;
  margin: 20px;
}

.slide-bt {
  position: absolute;
  left: 0%;
  bottom: -30%;
  z-index: 10;
  img {
    width: 1.2rem;
    height: 1.5rem;
    margin-top: .2rem;
    margin-left: 0.05rem;
    border-radius: 0.02rem;
  }
  .on {
    border: 0.04rem solid red;
    //background: #ffd200;
  }
}
.slide-bt span {
  width: 24px;
  height: 8px;
  background: #c9caca;
  float: left;
  margin: 5px;
  border-radius: 4px;
}
.slide .slide-bt .on {
  background: #ffd200;
}

.img-fan {
  // animation:play 1s linear infinite;
  animation: play 1.5s ease-in-out;
  transform: translate3d(0, 0, 0);
}
@keyframes play {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
</style>

翻卡：

原理:这个卡片翻转效果是利用背面的内容一开始就先翻转180度,等正面翻转的时候背面再翻转360度,这样子背面翻转到面对屏幕的时候内容却是正的而不是反的

代码解析:

这里主要用到了CSS3的一些新的属性:perspective;

　　　　　　　　　　　　　　　　　　backface-visibility:hidden;

　　　　　　　　　　　　　　　　　　transition:all 2s;

　　　　　　　　　　　　　　　　　　transform:rotateY(Ndeg);

下面对这些属性进行详细的说明.

1.perspective:number|none(默认)

主要用来表示3D元素距离视图的距离,单位是像素,定义在父元素上,子元素就会获得透视效果,目前浏览器都在不支持,chrom和safari支持扩展的-webkit-perspectiv.

这个属性能查到的资料上基本上都是这么讲的,感觉不是很理解什么事透视效果,在我看来,使用这个属性就是在3D转换的时候能够看到立体的3D效果,可以配合perspective-origion来使用,可惜的是目前只有chrom和safari支持带有浏览器属性前缀的该属性.

2.backface-visibility:visiale|hidden

该属性用来定义当元素不面向屏幕的时候是否可见,可用来设置旋转元素是否希望用来看到背面.IE10+和Firefox支持该属性,Opera 15+、Safari 和 Chrome 支持替代的 -webkit-backface-visibility 属性

3.transition:css属性名称 完成动画的时间 规定速度效果的速度曲线 定义过渡效果何时开始

transition是一个简写属性,用来设置四个属性:transition-property, transition-duration, transition-timing-function, transition-delay,一般为了省事直接就会写作transition:all 2s。过渡时间必须设置，否则不会产生过渡效果。IE10+,chrome,opera,Firefox支持transition属性,Safari支持替代的-webkit-transition属性

transition-timing-function:linear(匀速)|ease(默认.慢速开始,加快,慢速结束)|ease-in(慢速开始)|ease-out(慢速结束)|ease-in-out(慢速开始,慢速结束)|cubic-bezier(n,n,n,n)贝赛尔曲线

4.transform:rotateY(Ndeg)

兼容性不说那么多了,感觉反正用的时候全部加上浏览器前缀好啦.

主要是用来定义各种变换的,translate,scale,rotate,skew,可惜熟悉使用一下,用的还是比较多的

这就是 2019年最后一遍博客啦，

来年咱们继续加油呀 ，奋斗的少年

永远在路上

原文地址：https://www.cnblogs.com/yf-html/p/12092923.html

时间： 2024-10-11 06:41:34

Vue 3D轮播 带缩略图 版本 （+动画 翻卡）的相关文章

CSS3动画结合js实现3D轮播

昨天晚上有个同行提出要做一个旋转式的3D轮播图(下面统称banner图).我就为了帮他看了一下相关的技术贴发现符合要求的很少,所以只能自己去动手写了.看到有人写了CSS3立体旋转动画的博客,我就想把这个动画拆分成几个模块来做一个banner效果可不可以?最后自己动手写了一下还是可以的.不过这个banner效果还是存在一些bug,因为不是急用所以我也没有修复.以后有空我会修复的. html部分代码 <div class="container"> <div class=&

3d轮播图的效果实现

最近工程比较松,所以自己研究了一下3d轮播图的实现原理,其实说白了也不是很难就是在x,y,z轴上的平移和整个平面的旋转变换达到的效果, 下面是实现代码 html部分 <div class="stage"> <div class="contains"> <div style="transform: rotateY(0deg) translateZ(400px);">关于我</div> <div

Web全栈之路 1.CSS3中3D立方体以及3D轮播图

1.3D坐标系 3D坐标可以用左手来模拟,其中大拇指方向默认是X轴正方向,食指方向是Y轴正方向,中指方向是Z轴正方向.注意:当设置transform:rotateX(90deg)时,相当于将X轴转动90°,此时Z轴正方向向上,所以设置transform:translateZ(150px)时,就产生了3D立方体的上面,具体原理可以通过chrome浏览器审查元素来调试. 2.3D视图 transform-style:flat(默认,二维效果) / preserve-3d(三维效果).设置一个元素的t

3D轮播切换特效 源码

这个3D轮播切换特效是我2017年2月份写的 当初我 刚接触HTML不久,现在把源码分享给大家 源码的注释超级清楚 . <!-- 声明文档类型:html 作用:符合w3c统一标准规范 每个浏览器对html css js都有自己的编码模式(兼容模式)--> 无序列表标签  盒子模型标签  img图片标签四要素 1 <!-- 2 声明文档类型:html 3 作用:符合w3c统一标准规范 4 每个浏览器对html css js都有自己的编码模式(兼容模式) 5 --> 6 <!do

mobile_轮播图_transform 版本_transform 读写二合一

轮播图_transform 版本 关键点: 2D 变换 transform 不会改变 元素 在 文档流 中的位置 定位 position 会改变 元素 在 文档流 中的位置 touchstart 实现 无缝轮播: 创建两组图片,ulList.innerHTML = ulList.innerHTML; 1. 触屏时,如果是第一组的第一张图片,则瞬间切换到第二组的第一张图片: 2. 触屏时,如果是第二组的最后一张图片,则瞬间切换到第一组的最后一张. transform 读写二合一 关键点: argu

vue中轮播图的实现

轮播图 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> &l

vue项目轮播图的实现

利用   Vue-Awesome-Swiper插件来做轮播效果,github地址:https://github.com/surmon-china/vue-awesome-swiper 安装 npm install vue-awesome-swiper --save 页面中引用 import 'swiper/dist/css/swiper.css' import { swiper, swiperSlide } from 'vue-awesome-swiper' 代码如下: <template>

CSS3 3D轮播主要可以分成这样的三类

中秋节假期这么快就没了,这几天还一直下雨,索性在家看看书.这次看的是Tom Lane的<A Tour of PostgreSQL Internals>.这篇小随笔就算做学习笔记了.园子里面大神多,如果有哪里讲得不对,还请各位前辈多多指教了~在这个ppt里面,大神Tom Lane分别从三个角度对Postgresql的内部原理进行了介绍. 在传统的计算机算法和数据结构领域,大多数专业教材和书籍的默认语言都是Java或者C/C+ +,O’REILLY家倒是出了一本叫做<数据结构与算法javas

HTML5 CSS3 实现3D轮播效果

1.运用之前学到的知识,具体参考: http://www.cnblogs.com/lexin593119348/p/6835457.html 补充知识点,旋转的时候以旋转元素为中心点,所以子元素的位置如果不以该元素为中心旋转的时候就会飘来飘去,想要固定下来的话可以将子元素的位置调整到以该元素为中心. 将正方体的各个面调整好位置和角度后,为父div添加旋转动画既可实现. 具体代码: HTML: <div class="outbox"> <div class="