<span class="arrow left-arrow">‹</span>
<span class="arrow right-arrow">›</span>

                .arrow{font-family: Helvetica Neue,Helvetica,Arial,sans-serif;font-size: 70px;color: #fff;top: 50%;margin-top: -45px;cursor: pointer;position: absolute;display: none;}.left-arrow{left: 20px;}.right-arrow{right: 20px;}

//初始化
function Banner() {this.bannerGroup = $("#banner-group");this.index = 0;this.leftArrow = $('.left-arrow');this.rightArrow = $('.right-arrow');this.listenBannerHover();
};Banner.prototype.toggleArrow = function (isShow) {if(isShow) {var self = this;self.leftArrow.show();self.rightArrow.show();}else{self.leftArrow.hide();self.rightArrow.hide();}
};Banner.prototype.listenBannerHover = function (){var self = this;this.bannerGroup.hover(function () {//鼠标移动到上面
      clearInterval(self.timer);self.toggleArrow(true);},function () {//鼠标离开
      self.loop();self.toggleArrow(false);});
};

var util = require("gulp-util");
var sourcemaps = require("gulp-sourcemaps");//js任务
gulp.task("js",done =>{gulp.src("./src/js/*.js").pipe(sourcemaps.init()).pipe(uglify().on('error',util.log)).pipe(rename({"suffix":".min"})).pipe(sourcemaps.write()).pipe(gulp.dest('./dist/js/')).pipe(bs.reload({stream: true}));done();
});

//初始化
function Banner() {this.bannerGroup = $("#banner-group");this.index = 0;this.leftArrow = $('.left-arrow');this.rightArrow = $('.right-arrow');//获取li标签的数量，去控制点轮播图的箭头，下一张上一张图片this.bannerUL = $("#banner-ul");this.liList = this.bannerUL.children("li");this.bannerCount = this.liList.length;this.listenBannerHover();
};Banner.prototype.animate = function () {var self = this;self.bannerUL.animate({"left":-798*self.index},500);
};Banner.prototype.listenArrowClick = function () {var self = this;self.leftArrow.click(function () {if(self.index === 0){self.index = self.bannerCount - 1;}else{self.index --;}self.animate();});self.rightArrow.click(function () {if(self.index === self.bannerCount - 1){self.index = 0;}else{self.index ++;}self.animate();});
};//添加一个run方法
Banner.prototype.run = function () {this.loop();this.listenArrowClick();
};

                   <div class="page-control-group"><ul class="page-control"><li class="active" ></li><li ></li><li></li><li></li></ul></div>            

             .page-control-group{position: absolute;left: 0;right: 0;bottom: 20px;.page-control{margin: 0 auto;overflow: hidden;width: 12*4px+8*2px+16*3px;li{width: 12px;height: 12px;border: 1px solid #fff;border-radius: 50%;float: left;margin: 0 8px;box-sizing: border-box;cursor: pointer;&.active{background: #ffffff;}}}