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年最后一遍博客啦，

來年咱們繼續加油呀 ，奮斗的少年

永遠在路上