欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

ES6公用立体轮播组件的封装及使用

程序员文章站 2022-03-13 17:52:20
ES6公用立体轮播组件的封装及使用源码github链接:https://github.com/XieTongXue/how-to/tree/master/carousel-3d1、效果展示2、容易产生bug的点当前图片需要一个背景框,如上图所见白色框,白色框为漂浮于当前轮播图片上方;轮播图可以点击跳转到其他网页,但是由于存在层级关系,白色款会挡住轮播图,导致无法跳转2.1解决思路将白......

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

1、效果展示

ES6公用立体轮播组件的封装及使用

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.each(function(){
            let self = $(this),
            prev = $(this).next().get(0)?$(this).next():that.firstPosterItem,
            width = prev.css("width"),
            height = prev.css("height"),
            zIndex = prev.css("zIndex"),
            opacity = prev.css("opacity"),
            left = prev.css("left"),
            top = prev.css("top");
            if(top === '0px') { // 切换图片时记录当前图片href设置到固定框href
              $('.j-curr-poster-item').attr('href', self.attr('href'))
            }
            zIndexArr.push(zIndex);
            self.animate({
                "width":width,
                "height":height,
                "left":left,
                "opacity":opacity,
                "top":top,
            },that.setting.speed,function(){
                that.rotateFlag = true;
            });
        });
        this.posterItems.each(function(i){
            $(this).css("zIndex",zIndexArr[i]);
        });
      }
      if(type == "right"){
        this.posterItems.each(function(){
            let self = $(this),
            next = $(this).prev().get(0)?$(this).prev():that.lastPosterItem,
                width = next.css("width"),
                height = next.css("height"),
                zIndex = next.css("zIndex"),
                opacity = next.css("opacity"),
                left = next.css("left"),
                top = next.css("top");
                if(top === '0px') { // 切换图片时记录当前图片href设置到固定框href
                  $('.j-curr-poster-item').attr('href', self.attr('href'))
                }
                zIndexArr.push(zIndex);
            self.animate({
                "width":width,
                "height":height,
                "left":left,
                "opacity":opacity,
                "top":top,
            },that.setting.speed,function(){
                that.rotateFlag = true;
            });
        });
        this.posterItems.each(function(i){
            $(this).css("zIndex",zIndexArr[i]);
        });
      }
  }
  setFirstPosition () {
      this.Poster.css({"width":this.setting.width,"height":this.setting.height});
      this.posterList.css({"width":this.setting.width,"height":this.setting.height});
      let width = (this.setting.width - this.setting.posterWidth) / 2;
      this.firstPosterItem.css({
          "width":this.setting.posterWidth,
          "height":this.setting.posterHeight,
          "left":width,
          "zIndex":Math.ceil(this.posterItems.size()/2),
          "top":this.setVertialType(this.setting.posterHeight)
      });
  }
  setSlicePosition () {
      let _self = this;
      let sliceItems = this.posterItems.slice(1),
          level = Math.floor(this.posterItems.length/2),
          leftItems = sliceItems.slice(0,level),
          rightItems = sliceItems.slice(level),
          posterWidth = this.setting.posterWidth,
          posterHeight = this.setting.posterHeight,
          Btnwidth = (this.setting.width - this.setting.posterWidth) / 2,
          gap = Btnwidth/level,
          containerWidth = this.setting.width;
      let i = 1;
      let leftWidth = posterWidth;
      let leftHeight = posterHeight;
      let zLoop1 = level;
      leftItems.each(function(index,item){
          leftWidth = posterWidth * _self.setting.scale;
          leftHeight = posterHeight*_self.setting.scale;
          $(this).css({
              "width":leftWidth,
              "height":leftHeight,
              "left": Btnwidth - i*gap,
              "zIndex":zLoop1--,
              "opacity": 0.8,
              "top":_self.setVertialType(leftHeight)
          });
          i++;
      });
      let j = level;
      let zLoop2 = 1;
      let rightWidth = posterWidth;
      let rightHeight = posterHeight;
      rightItems.each(function(index,item){
          let rightWidth = posterWidth * _self.setting.scale;
          let rightHeight = posterHeight*_self.setting.scale;
          $(this).css({
              "width":rightWidth,
              "height":rightHeight,
              "left": containerWidth -( Btnwidth - j*gap + rightWidth),
              "zIndex":zLoop2++,
              "opacity": 0.8,
              "top":_self.setVertialType(rightHeight)
          });
          j--;
      });
  }
  getSetting () {
      let settting = this.Poster.attr("data-setting");
      if(settting.length > 0){
          return $.parseJSON(settting);
      }else{
          return {};
      }
  }
  setVertialType (height) {
      let algin = this.setting.algin;
      if(algin == "top") {
          return 0
      }else if(algin == "middle"){
          return (this.setting.posterHeight - height) / 2
      }else if(algin == "bottom"){
          return this.setting.posterHeight - height
      }else {
          return (this.setting.posterHeight - height) / 2
      }
  }
}

4、组件使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Carousel-3D</title>
  <link href="./poster.css" rel="stylesheet">
  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
  <div class="poster"> <!--轮播图最外层容器,命名随意-->
    <!--轮播图区域,class名要与实例化时所用的一致-->
    <div class = "poster-main" data-setting = '{"width":760,"height":248,"posterWidth":610,"posterHeight":248,"scale":0.85,"dealy":"3000","algin":"middle"}' >
        <!--当前图片背景框-->
        <a href="" class="curr-bg j-curr-poster-item" target="_blank"></a>
        <!--图片列表-->
        <div class = "poster-list">
            <a class = "poster-item" href="https://github.com/xietongxue" title="1" class="ms-slide-pic-img" target="_blank" style="width:100%;height: 100%;">
              <img src="img/1.png" alt="1" width="610" height="248" border="0">
            </a>
            <a class = "poster-item" href="https://blog.csdn.net/fabulous1111" title="2" class="ms-slide-pic-img" target="_blank" style="width:100%;height: 100%;">
              <img src="img/2.png" alt="2" width="610" height="248" border="0">
            </a>
            <a class = "poster-item" href="https://www.baidu.com" title="3" class="ms-slide-pic-img" target="_blank" style="width:100%;height: 100%;">
              <img src="img/3.png" alt="3" width="610" height="248" border="0">
            </a>
        </div>
        <!--按钮-->
        <button class="btn-left poster-prev-btn"></button>
        <button class="btn-right poster-next-btn"></button>
  </div>
</div>
</body>
<script src="./poster.js"></script>
<script>
// 用于适配一个网页有多个轮播的情况,只含一个其实只需要new Poster($('.poster-main'));
$('.poster-main').each(function(index,item){
    // 初始化轮播图
    new Poster($(this));
});
</script>
</html>

5、sass

*{padding:0;margin:0}
html,body {width: 100%;height:100%;background: #666;}

@mixin setBtn($width, $height, $left, $top, $img) {
    position: absolute;
    top: $top;
    left: $left;
    width: $width;
    height: $height;
    background: url('./img/' + $img + '.png') no-repeat;
    border:none;
    outline: none;
    cursor: pointer;
    z-index: 666;
}
.poster {
  position: absolute;
  top: 200px;
  left: 50%;
  transform: translateX(-50%);
  width: 820px;
  height: 280px;
  z-index: 5;
  .poster-main{
    position: absolute;
    top: 0;
    left: 30px;
    width: 100%;
    height:100%;
    .btn-left {
    @include setBtn(36px, 36px, -20.5px, 110px, 'btn-left');
    }
    .btn-right {
    @include setBtn(36px, 36px, 738.5px, 110px, 'btn-right');
    }
    .curr-bg {
        display: block;
        position: absolute;
        top: -2px;
        left: 61px;
        width: 638px;
        height: 273px;
        background:url('./img/curr-bg.png') no-repeat center top;
        z-index: 666;
    }
    .poster-list{
        position: absolute;
        top: 8px;
        left: 0;
        .poster-item {
            position: absolute;
            left: 0px;
            top: 0px;
            img {
                width: 100%;
                height: 100%;
            }
        }
    }
    a, img {
        display: block;
    }
  }
}

6、支持多张但只支持单数

原因:
ES6公用立体轮播组件的封装及使用
需要图片资源或者编译后的css请访问:https://github.com/XieTongXue/how-to/tree/master/carousel-3d

本文地址:https://blog.csdn.net/Fabulous1111/article/details/85856658