android-cloud-H5/static/js/carousel.js

(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));