(function(window, undefined) { var Carousel = function(ele, obj) { console.log(obj) this.ele = ele; this.cardsList = this.ele.children(); this.cardsNum = this.cardsList.length; this.direction = obj.direction ? obj.direction : 'horizontal'; this.scale = obj.scale; this.transition = obj.transition || '500ms'; this.transformOrigin = obj.transformOrigin; this.opacity = obj.opacity; this.offsetDistance = obj.offsetDistance; this.switchBtn = obj.switchBtn; this.isClickCard = obj.isClickCard || false; this.isAuto = obj.isAuto || false; this.interval = obj.interval || 5000; this.n = obj.n; this.mediant = Math.floor(this.cardsNum / 2); this.cardsListArr = [].slice.call(this.cardsList); this.timer = null; this.cssObj = {}; this.showPicNumber = obj.showPicNumber || null; this.certainStyle(); this.switchEffect(); this.cardsClick(); this.switchBtnClick(); this.autoMove(); this.switchTimer(); this.dataList = obj.dataList; this.nav = obj.nav; }; Carousel.prototype = { constructor: Carousel, switchTimer: function() { var carousel = this; if (this.isAuto) { this.cardsList.on('mouseover', function() { clearInterval(carousel.timer); }); this.cardsList.on('mouseout', function() { carousel.autoMove(); }); }; }, certainStyle: function() { this.cssObj.position = 'absolute'; if (this.scale) { this.scale.length == 1 && this.scale.push(this.scale[0]); }; if (this.direction == 'horizontal') { this.cssObj.left = '50%'; this.availSize = this.ele.outerWidth(); this.cardSize = this.cardsList.eq(0).outerWidth(); } else if (this.direction == 'vertical') { this.cssObj.top = '50%'; this.availSize = this.ele.outerHeight(); this.cardSize = this.cardsList.eq(0).outerHeight(); // console.log(this.cssObj) }; this.offsetDistance = this.offsetDistance || this.availSize / (this.cardsNum - 1); this.transformOrigin && (this.cssObj.transformOrigin = this.transformOrigin); this.cssObj.transition = this.transition; // console.log(this.cssObj) }, dynamicStyle: function(offsetIndex, offsetIndexAbs, reset, showPicNumber) { if (this.direction == 'horizontal') { // console.log(this.cssObj) // console.log(this.cardSize, this.offsetDistance, offsetIndex, "this.cardSize") // console.log(window.innerWidth, "innerWidth") let arrLength = this.cardsListArr.length; // 根据轮播图的长度和屏幕宽度做相应偏移量调整 switch (arrLength) { case 2: { if (window.innerWidth < 768 && offsetIndex !== 0) { if(offsetIndex > 0){ this.cssObj.marginLeft = -this.cardSize / 2 + this.offsetDistance / 2 * offsetIndex + (-offsetIndex) * 170 + 'px'; }else{ this.cssObj.marginLeft = -this.cardSize / 2 + this.offsetDistance / 2 * offsetIndex + (-offsetIndex) * 167 + 'px'; } } else if (window.innerWidth < 1200 && offsetIndex !== 0) { this.cssObj.marginLeft = -this.cardSize / 2 + this.offsetDistance / 2 * offsetIndex + (-offsetIndex) * 60 + 'px'; } else if (window.innerWidth >= 1200 && offsetIndex !== 0) { this.cssObj.marginLeft = -this.cardSize / 2 + this.offsetDistance / 2 * offsetIndex + (-offsetIndex) * 10 + 'px'; } else { this.cssObj.marginLeft = -this.cardSize / 2 + this.offsetDistance * offsetIndex + 'px'; } }; break; case 3: case 4: { if (window.innerWidth < 768 && offsetIndex !== 0) { this.cssObj.marginLeft = -this.cardSize / 2 + this.offsetDistance / 2 * offsetIndex + (-offsetIndex) * 15 + 'px'; } else if (window.innerWidth < 1200 && offsetIndex !== 0) { if (offsetIndex == -1) { this.cssObj.marginLeft = -this.cardSize / 2 + this.offsetDistance * offsetIndex + 52 + 'px'; } else { this.cssObj.marginLeft = -this.cardSize / 2 + this.offsetDistance * offsetIndex - 60 + 'px'; } } else if (window.innerWidth >= 1200 && offsetIndex !== 0) { this.cssObj.marginLeft = -this.cardSize / 2 + this.offsetDistance * offsetIndex + (-offsetIndex) * 10 + 'px'; } else { this.cssObj.marginLeft = -this.cardSize / 2 + this.offsetDistance * offsetIndex + 'px'; } }; break; default: { if (window.innerWidth < 768) { this.cssObj.marginLeft = -this.cardSize / 2 + this.offsetDistance * offsetIndex + (-offsetIndex) * 4 + 'px'; } else if(window.innerWidth < 1200) { this.cssObj.marginLeft = -this.cardSize / 2 + this.offsetDistance * offsetIndex + 'px'; }else{ this.cssObj.marginLeft = -this.cardSize / 2 + this.offsetDistance * offsetIndex + (offsetIndex) * 30 + 'px'; } }; break; } } else if (this.direction == 'vertical') { this.cssObj.marginTop = -this.cardSize / 2 + this.offsetDistance * offsetIndex + 'px'; }; this.cssObj.zIndex = reset; // this.opacity && (this.cssObj.opacity = Math.pow(this.opacity, offsetIndexAbs)); // 根据要展示的图片数,来给定透明度,showPicNumber为1时展示主图,为3时展示3张图,不传时则默认所有都展示,其它则不展示 if (this.opacity) { switch (showPicNumber) { case 1: { if (Math.pow(this.opacity, offsetIndexAbs) === 1) { this.cssObj.opacity = 1; } else { this.cssObj.opacity = 0; } }; break; case 3: { if (Math.pow(this.opacity, offsetIndexAbs) >= 0.9) { this.cssObj.opacity = Math.pow(this.opacity, offsetIndexAbs) } else { this.cssObj.opacity = 0 } }; break; default: this.cssObj.opacity = Math.pow(this.opacity, offsetIndexAbs); break; } } this.scale && (this.cssObj.transform = 'scale(' + Math.pow(this.scale[0], offsetIndexAbs) + ',' + Math.pow(this.scale[1], offsetIndexAbs) + ')'); this.cssObj.background = "rgba(0,0,0,1);" var show = "box-shadow" this.cssObj.show = '0px 8px 13px 0px rgba(23,28,46,0.88)' console.log(this.scale[1]) // if(this.opacity == 0.9){ // this.cssObj.background = 'red'; // } // this.cssObj.background = 'red'; }, switchEffect: function() { var carousel = this; const showPicNumber = carousel.showPicNumber; var offsetNum = Math.abs(carousel.n - carousel.mediant); console.log('arousel.n>>>', carousel.n) console.log("carousel.mediant>>>", carousel.mediant) if (carousel.n == carousel.mediant && carousel.nav == 1) { return; } else if (carousel.n > carousel.mediant) { // alert("提示信息2") carousel.cardsListArr = carousel.cardsListArr.concat(carousel.cardsListArr.splice(0, offsetNum)); } else { // alert("提示信息3") carousel.cardsListArr = carousel.cardsListArr.splice(carousel.cardsNum - offsetNum).concat(carousel.cardsListArr); }; $(carousel.cardsListArr).each(function(i, e) { var offsetIndex = i - carousel.mediant, offsetIndexAbs = Math.abs(offsetIndex), reset = carousel.mediant - offsetIndexAbs; carousel.dynamicStyle(offsetIndex, offsetIndexAbs, reset, showPicNumber); // console.log(carousel.cssObj) $(e).css(carousel.cssObj); $(e).attr('n', i); }); }, cardsClick: function() { console.log(">>>>>>>>>s", this.isClickCard) if (this.isClickCard) { var carousel = this; $(carousel.cardsListArr).on('click', function() {}); // $('.nav-gse').on('click',function(){ // $(this).addClass('nav-gse-ave') // $(this).siblings().removeClass('nav-gse-ave') //// css({"background":"red"}) // $(this).find('.nav-bg').find('.nav-mnai').removeClass('nav-mnai') // $(this).siblings().find('.nav-bg').find('.nav-buseqw').addClass('nav-mnai') // carousel.switchEffect(); // }) }; }, prev: function() { var carousel = this; carousel.n = carousel.mediant - 1; carousel.n < 0 && (carousel.n = carousel.cardsNum - 1); carousel.switchEffect(); // $("#containerse li").each(function(i, e) { // if($(e).css("opacity") == 1){ // indexs = i // } // }); // // console.log("dataList>>>",carousel.dataList) }, next: function() { var carousel = this; carousel.n = carousel.mediant + 1; carousel.n > carousel.cardsNum - 1 && (carousel.n = 0); carousel.switchEffect(); }, switchBtnClick: function() { var carousel = this; if (carousel.switchBtn) { carousel.switchBtn.eq(0).on('click', function() { carousel.prev(); if (carousel.isAuto) { clearInterval(carousel.timer); carousel.cardsList.eq(carousel.n).one('transitionend', function() { carousel.autoMove(); }); }; }); carousel.switchBtn.eq(1).on('click', function() { carousel.next(); if (carousel.isAuto) { clearInterval(carousel.timer); carousel.cardsList.eq(carousel.n).one('transitionend', function() { carousel.autoMove(); }); }; }); }; }, autoMove: function() { var carousel = this; if (carousel.isAuto) { clearInterval(carousel.timer); carousel.timer = setInterval(function() { carousel.next(); }, carousel.interval); }; }, }; window.Carousel = Carousel; }(window));