antd autoplay为true时不轮播_ES6公用立体轮播组件的封装及使用

ES6公用立体轮播组件的封装及使用
源码github链接：https://github.com/XieTongXue/how-to/tree/master/carousel-3d

1、效果展示

2、容易产生bug的点

当前图片需要一个背景框，如上图所见白色框，白色框为漂浮于当前轮播图片上方；轮播图可以点击跳转到其他网页，但是由于存在层级关系，白色款会挡住轮播图，导致无法跳转

2.1解决思路

将白色框设置为a链接，当图片滚动的时候设置a链接跳转链接为当前轮播图应该跳转的链接，如头图。

3、公用组件源码

命名poster.js

class Poster {
    
  constructor(Poster) {
    
    let self = this;
    this.Poster = Poster;
    this.posterList = Poster.find(".poster-list");
    this.posterItems = Poster.find(".poster-item");
    this.firstPosterItem = this.posterItems.first();
    this.lastPosterItem = this.posterItems.last();
    this.prevBtn = this.Poster.find(".poster-prev-btn");
    this.nextBtn = this.Poster.find(".poster-next-btn");
    this.setting = {
    
        "width":"760", // 轮播图宽度(比如此例子为三张图片可视区域宽度)
        "height":"248", // 轮播图高度(比如此例子为三张图片可视区域高度)
        "posterWidth":"610", // 当前图片宽度
        "posterHeight":"248", // 当前图片高度
        "scale":"0.8", // 非当前图片缩放比例
        "speed":"1000", // 动画时长
        "isAutoplay":"true", // 是否自动播放
        "dealy":"1000" // 切换间隔
    }
    $.extend(this.setting,this.getSetting())
    this.setFirstPosition();
    this.setSlicePosition();
    this.rotateFlag = true;
    this.prevBtn.bind("click",function(){
    
        if(self.rotateFlag){
    
            self.rotateFlag = false;
            self.rotateAnimate("left")
        }
    });
    this.nextBtn.bind("click",function(){
    
        if(self.rotateFlag){
    
            self.rotateFlag = false;
            self.rotateAnimate("right")
        }
    });
    if(this.setting.isAutoplay){
    
        this.autoPlay();
        this.Poster.hover(function(){
    clearInterval(self.timer)},function(){
    self.autoPlay()})
    }
  }
  autoPlay () {
    
    this.prevBtn.click();
    let that = this;
    this.timer =  window.setInterval(function(){
    
        that.prevBtn.click();
    },that.setting.dealy)
  }
  rotateAnimate (type) {
    
      let that = this;
      let zIndexArr = [];
      if(type == "left"){
    
        this.posterItems.e