js轮播图

html

<!-- 轮播图 -->
    <div class="banner">
        <div class="imgs">
            <a href="javascript:;">
                <video id="movie" muted src="" autoplay="autoplay"
                    loop></video>
            </a>
            <a href="javascript:;"><img class="swiper-img" src="../images/home/banner1.png" alt="图片加载失败"></a>
            <a href="javascript:;"><img class="swiper-img" src="../images/home/banner2.png" alt="图片加载失败"></a>
            <a href="javascript:;"><img class="swiper-img" src="../images/home/banner3.png" alt="图片加载失败"></a>
            <a href="javascript:;"><img class="swiper-img" src="../images/home/banner1.png" alt="图片加载失败"></a>
            <a href="javascript:;"><img class="swiper-img" src="../images/home/banner2.png" alt="图片加载失败"></a>
        </div>
        <div class="control">
            <div class="left"><i></i></div>
            <div class="right"><i></i></div>
        </div>
        <ul class="kinds"></ul>
    </div>

js

<script>

//轮播图
class testBanner {
    constructor() {
        this.imgs = $(".banner").find(".imgs").find("a");
        this.left = $(".banner").find(".control").find(".left");
        this.right = $(".banner").find(".control").find(".right");
        this.points = $(".banner").find(".kinds");
        this.aa = $(".banner").find(".imgs").find("a");
        this.delay = 3000;
        this.autoplay = true;
        this.current = 0;
        this.duration = 500;
        this.box = $(".banner");

        this.len = this.imgs.length;
        this.t = null;

        this.init()
    }
    init() {
        this.autoplay = this.autoplay == false ? false : true;
        this.delay = this.delay || 2000;
        this.current = this.current || 0;
        this.duration = this.duration || 500;
        this.addEvent();
        this.createCircle();
    }

    createCircle() {
        for (var i = 0; i < this.len; i++) {
            this.points.append('<li></li>');
        }
        this.points.find("li").eq(this.current).addClass("active").siblings().removeClass();
        this.hoverEvent();
        this.move();
    }

    auto() {
        var that = this;
        this.box.hover(function () {
            clearInterval(that.t);
        }, function () {
            that.t = setInterval(function () {
                that.next();
            }, that.delay)
        })
    }

    hoverEvent() {
        var that = this;
        this.points.find("li").on("mouseenter", function () {
            $(this).css('width', '24px').siblings().css('width', '14px');
            that.current = $(this).index();
            that.move();
        })
        this.points.find("li").on("mouseleave", function () {
            $(this).css('width', '14px');
            that.current = $(this).index();
            that.move();
        })
    }

    addEvent() {
        var that = this;
        this.left.on("click", function () {
            that.prev();
        });
        this.right.on("click", function () {
            that.next();
        });
    }

    next() {
        if (this.current == this.len - 1) {
            this.current = 0;
        } else {
            this.current++;
        }
        this.move();
    }
    prev() {
        if (this.current == 0) {
            this.current = this.len - 1;
        } else {
            this.current--;
        }
        this.move();
    }
    move() {
        var that = this;
		if(this.current == 0){
            clearInterval(that.t);
			that.t = setInterval(function () {
                that.next();
            }, 15000)
		}else{
            $('.swiper-img').eq(this.current -1).css({'width':'100%','height': '100%','left': '0','top': '0'})
            $('.swiper-img').eq(this.current -1).stop().animate({ width:'110%',height: '110%',left:'-5%',top: '-5%'},5000);
			clearInterval(that.t);
			that.t = setInterval(function () {
                that.next();
            }, that.delay)
        }
        this.points.find("li").eq(this.current).addClass("active").siblings().removeClass();
        this.aa.eq(this.current).stop().fadeIn(this.duration).siblings().stop().fadeOut(this.duration);
    }
}

new testBanner();

</script>

css

<style>
     /* 轮播图 */
  .banner {
    width: 100%;
     height: 26rem;
    /* height: 90%; */
    position: relative;
    cursor: pointer;
    flex: auto;
  }

  .banner .imgs {
    width: 100%;
    height: 90%;
    position: relative;
    overflow: hidden;
    flex: auto;
  }


  .banner .imgs img {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    display: none;
  }

  .banner .imgs img:nth-of-type(1) {
    display: block;
  }

  .banner .control .left,
  .banner .control .right {
    width: 40px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    position: absolute;
    cursor: pointer;
  }

  .banner .control .left {
    left: 80px;
    top: 40%;
  }

  .banner .control .left i {
    display: block;
    width: 100%;
    height: 100%;
    background: url(../images/home/banner-button-left.png) no-repeat;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }

  .banner .control .right {
    right: 80px;
    top: 40%;
  }

  .banner .control .right i {
    display: block;
    width: 100%;
    height: 100%;
    background: url(../images/home/banner-button-right.png) no-repeat;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }

  .banner .kinds {
    width: 128px;
    /* height: 36px; */
    display: flex;
    align-items: center;
    justify-content: space-around;
    position: absolute;
    bottom: 150px;
    left: 158px;
    z-index: 999999;
  }

  .banner .kinds li {
    display: inline-block;
    cursor: pointer;
    width: 14px;
    height: 8px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 4px;
  }

  .banner li.active {
    width: 24px!important;
    background: rgba(255, 255, 255, 1);
  }
</style>