yali项目的slider

Posted 2020-08-14 caidan1995

// 调用        
var s41 = new slider({
    target : ‘#slider411‘,
    titleActiveClass : ‘j-active‘,
    itemActiveClass : ‘j-active‘,
    btn : ‘.sbtn‘,
});

// 声明方法
var slider = function(element){
    if(!element.target)return false;
    // 判断设备是否支持touch事件
    var me = this;
    this.touch = (‘ontouchstart‘ in window) || window.DocumentTouch && document instanceof DocumentTouch;
    this.target = element.target;
    this.parent = element.parent||false;
    this.slider = document.querySelector(this.target) || document.getElementById(‘slider‘);
    this.count = $(element.target).children().size();
    this.titleId = element.titleId || !1;            
    this.next = element.nextClass,
    this.prev = element.prevClass,
    this.animateClass = element.animateClass || ‘f-anim‘;
    this.scaleAnimateClass = element.scaleAnimateClass || ‘f-slow‘,
    this.control = element.control,
    this.titleActiveClass = element.titleActiveClass||‘j-active‘,
    this.itemActiveClass = element.itemActiveClass||‘j-active‘,
    this.scale = element.scale-1;
    this.btn = element.btn;
    this.sImg = element.sImg; 
    this.page = element.page;
    this.sImgActiveClass = element.sImgActiveClass||‘on‘;
    console.log(this.target+‘, ‘+this.titleId+‘, ‘+this.scrollWidth);
    //console.log(this.target);
    // 点击缩略图滚动对象
    (function(){
        var t = me.sImg;
        var activeClass = ‘on‘;
        
        if(!($(t).size()>0))return false;                
        var c = $(t).children();
        c.eq(0).addClass(activeClass);
        c.on(‘click‘, function(){
            var i = $(this).index();
            me.scrollTo(i);
            c.removeClass(activeClass).eq(i).addClass(activeClass);
        });        
    })();
    
    this.first=true;
    this.last=false;
    var item = $(element.target).children().eq(0);
    this.itemWidth = item.width()+parseInt(item.css(‘marginLeft‘))+parseInt(item.css(‘marginRight‘))+parseInt(item.css(‘paddingLeft‘))+parseInt(item.css(‘paddingRight‘))+parseInt(item.css(‘border-left-width‘))+parseInt(item.css(‘border-right-width‘));
    
    item.addClass(this.itemActiveClass);
    $(element.target).children().eq(1).addClass(‘j-next‘);
    $(element.target).width(this.itemWidth*this.count);
    var titlechildren = $(‘#‘+this.titleId).children();
    titlechildren.eq(0).addClass(me.titleActiveClass);
    this.scrollWidth = this.itemWidth || element.scrollwidth || window.innerWidth;
    this.scrollPage = function(p){            // 缩略图翻页
        var l = p*me.page; // itemCount
        var item = $(me.sImg).children().eq(0);
        var w = item.width()+parseInt(item.css(‘marginLeft‘))+parseInt(item.css(‘marginRight‘))+parseInt(item.css(‘paddingLeft‘))+parseInt(item.css(‘paddingRight‘))+parseInt(item.css(‘border-left-width‘))+parseInt(item.css(‘border-right-width‘))
        $(me.sImg).parent().animate({scrollLeft: l*w},500);
        console.log(w+‘, ‘+l+‘, ‘);
    };


    this.scrollTo = function(page,sliderTips){
        titlechildren.removeClass(me.titleActiveClass);
        var i = page;
        this.events.index = i;
        titlechildren.eq(i).addClass(me.titleActiveClass);
        $(element.target).addClass(me.animateClass);
        this.slider.style.webkitTransform = "translate3d(" + (-i * this.scrollWidth ) + "px,0 ,0)";
        me.class();
        // window.lacation.href参数导致滑动时执行
        me.first=false;
        me.last=false;
                        
        if(sliderTips){
            if(page==0){
                me.first=true;
                me.last=false;
            }else if(page==me.count-1){
                me.first=false;
                me.last=true;                        
            };
        };                
        if($(me.sImg).size()>0){ // 判断缩略图翻页[0]
            var i = me.events.index*1+1;
            var p = Math.ceil(i/me.page)-1;
            me.scrollPage(p);
            $(me.sImg).children().removeClass(me.sImgActiveClass).eq(me.events.index).addClass(me.sImgActiveClass);
        };    
        
        
        // 缩放结束
        if(me.scale>0){
            var active = ‘.‘+me.itemActiveClass;                        
            $(active, me.target).css({‘webkitTransform‘:‘scale(‘+(me.scale+1)+‘)‘});
            $(‘.j-prev‘, me.target).add(‘.j-next‘, me.target).css(‘webkitTransform‘, ‘scale(1)‘);
            $(me.target).children().addClass(‘f-slow‘);                        
        };
    };
    
    // 标题跳转事件
    if(this.titleId){
        var d = document.querySelector("#"+this.titleId);
        d.onclick = function(event){
            me.scrollTo($(event.target).index());
        };
    };
    
    var first, last, started=false;
    
    // 事件
    this.events = {
        index: 0,                                       // 显示元素的索引                
        slider: me.slider,                            // this为slider对象
        icons: document.getElementById(me.titleId),
        icon:  document.querySelectorAll(‘#‘+me.titleId+‘ *‘),
        handleEvent: function(event) {
            // this指events对象
            var self = this;
            if (event.type == ‘touchstart‘) {
                self.start(event);
            } else if(event.type == ‘touchmove‘) {
                self.move(event);
            } else if(event.type == ‘touchend‘) {
                self.end(event);
            }
        },

        // 滑动开始
        start: function(event) {
            started = true;
            //console.log(‘start ‘+me.first+‘, ‘+me.last);
            //event.preventDefault();
            if (event.touches.length > 1 || event.scale && event.scale !== 1) return;
            
            var touch = event.touches[0];                // touches数组对象获得屏幕上所有的touch，取第一个touch
            startPos = {                                 // 取第一个touch的坐标值
                x: touch.pageX,
                y: touch.pageY,
                time: +new Date
            };
            endPos = {
                x: touch.pageX - startPos.x,
                y: touch.pageY - startPos.y
            };
            
            
        
            
            // 缩放开始                    
            if(me.scale) $(me.target).children().removeClass(me.scaleAnimateClass);
            
            this.slider.addEventListener(‘touchmove‘, this, false);
            this.slider.addEventListener(‘touchend‘, this, false);

            //自定义touchstart事件
            if(element.start){
                element.start.call(me, event);
            };
        },

        // 移动
        move: function(event) {
            // 当屏幕有多个touch或者页面被缩放过，就不执行move操作
            if (event.touches.length > 1 || event.scale && event.scale !== 1) return;
            var touch = event.touches[0];
            endPos = {
                x: touch.pageX - startPos.x,
                y: touch.pageY - startPos.y
            };
            
            var o = $(event.target).closest(‘._target‘); // czy
            if(o.length){
                if(o.hasClass(‘_left‘)){ // 锁定左
                    if(endPos.x>0){ // 往右
                        event.preventDefault(); // 执行动画
                    }else if(endPos.x<0){ // 往左
                        event.stopPropagation(); // 执行原生滚动
                        return ;
                    }
                }else if(o.hasClass(‘_right‘)){ // 锁定右
                    if(endPos.x>0){ // 往右
                        event.stopPropagation(); // 执行原生滚动
                        return ;
                    }else if(endPos.x<0){ // 往左
                        event.preventDefault(); // 执行动画
                    }
                }else{
                    // 中间
                    event.stopPropagation(); // 执行原生滚动
                    return ;
                }
            }
            
            // 系统滚动条事件
            /*
                var sx =  $(event.target).closest(‘.scrollx‘);
                var sy =  $(event.target).closest(‘.scrolly‘);                    
                if((sx.size()>0)||(sy.size()>0)){
                    me.parent = true;
                    if(sx.size()>0){
                            me.first = false;
                            me.last = false;
                            // 判断水平滚动条是否first或next                                
                            var x={
                                pl : parseInt(sx.css(‘paddingLeft‘)),
                                pr : parseInt(sx.css(‘paddingRight‘)),
                                pw : sx.width()*1,
                                l : Math.abs(sx.children().position().left),
                                w : sx.children().width()*1,
                                r : parseInt(sx.children().css(‘paddingLeft‘)),
                            };
                            if(x.pl==x.l&&endPos.x>0){
                                me.first = true;
                                me.last = false;
                            }else if(((x.l+x.pr+x.pl+x.pw)-(x.w+x.r)==0)&&endPos.x<0){                                        
                                me.first = false;
                                me.last = true;
                            }else{
                                me.first = false;
                                me.last = false;
                                return false;
                            };
                        if(me.first||me.last){
                            event.preventDefault();
                        }else{
                            event.stopPropagation();
                            return false;
                        };
                        
                    }else if(sy.size()>0){
                        // 垂直滚动事件                                
                        if(scrollY || (!scrollX && Math.abs(endPos.y)>=Math.abs(endPos.x))){
                            // 阻止冒泡
                            event.stopPropagation();
                            scrollY = true;
                            scrollX = false;
                            return false;
                        }else if(scrollX || Math.abs(endPos.y)<Math.abs(endPos.x)){
                            scrollY = false;
                            scrollX = true;
                        };
                    };
                }else{
                        
                    console.log(‘阻止默认‘);
                    event.preventDefault();
                };
                    
        
            */
            
            if(me.parent && ((me.first && endPos.x>0) || (me.last && endPos.x<0))){
                event.preventDefault();
            }else{
                event.stopPropagation()
            };
            
            // 跟随变形
            if(me.scale>0){
                var active = ‘.‘+me.itemActiveClass;
                var t = $(active, me.target).css(‘webkitTransform‘) || $(active, me.target).css(‘transform‘);
                var scale = t.substring(t.indexOf(‘(‘)+1,t.indexOf(‘,‘))-1;
                var n = me.scale/(1024/Math.abs(endPos.x))+1;
                var a = me.scale-(me.scale/(1024/Math.abs(endPos.x)))+1;
                //console.log(‘a ‘+a);
                if(endPos.x<0){                            
                    $(‘.j-next‘, me.target).css(‘webkitTransform‘,‘scale(‘+n+‘)‘);
                    $(active, me.target).css(‘webkitTransform‘,‘scale(‘+a+‘)‘);
                }else if(endPos.x>0){
                    $(‘.j-prev‘, me.target).css(‘webkitTransform‘,‘scale(‘+n+‘)‘);                            
                    $(active, me.target).css(‘webkitTransform‘,‘scale(‘+a+‘)‘);
                };
            };

            // 执行操作，使元素移动
            $(this.slider).removeClass(me.animateClass);
            this.slider.style.webkitTransform = "translate3d(" + (-this.index * me.scrollWidth + endPos.x/($(window).width()/me.scrollWidth)) + "px,0 ,0)";
            
            // 自定义touchmove事件
            if(element.move){
                element.move.call(me, event);
            };
        },

        // 滑动释放
        end: function(event) {
            started = false;
            var o = $(event.target).closest(‘._target‘); // czy
            if(o.length){
                if(o.hasClass(‘_left‘)){ // 锁定左
                    if(endPos.x>0){ // 往右
                        event.preventDefault(); // 执行动画
                    }else if(endPos.x<0){ // 往左
                        event.stopPropagation(); // 执行原生滚动
                        checkScroll();
                        return ;
                    }
                }else if(o.hasClass(‘_right‘)){ // 锁定右
                    if(endPos.x>0){ // 往右
                        event.stopPropagation(); // 执行原生滚动
                        checkScroll();
                        return ;
                    }else if(endPos.x<0){ // 往左
                        event.preventDefault(); // 执行动画
                    }
                }else{
                    // 中间
                    event.stopPropagation(); // 执行原生滚动
                    checkScroll();
                    return ;
                }
            }
            function checkScroll(){
                var pwidth = o.width();
                var width = o.children().width();
                var left = o.scrollLeft();
                first = left==0;
                last = pwidth+left>=width;
                if(first && last){
                    o.addClass(‘_left‘);
                    o.addClass(‘_right‘);
                }else if(first){
                    o.addClass(‘_left‘);
                    o.removeClass(‘_right‘);
                }else if(last){
                    o.addClass(‘_right‘);
                    o.removeClass(‘_left‘);
                }else{
                    o.removeClass(‘_left‘);
                    o.removeClass(‘_right‘);
                }
            }
            
            if(me.parent && ((me.first && endPos.x>0) || (me.last && endPos.x<0))){
            }else{
                event.stopPropagation();
            };
            
            
            var duration = +new Date - startPos.time;    // 滑动的持续时间 
            if(me.titleId)this.icon[this.index].className = ‘‘;
            if (Number(duration) > 100) {
                // 判断是左移还是右移，当偏移量大于50时执行
                if (endPos.x > 50) {
                    this.index == 0 ? i=0:i=1;
                    this.index = parseInt(this.index) - i;
                    this.index == 0 ? me.first = true : me.first = false;
                    me.last = false;
               } else if(endPos.x < -50) {
                    this.index == me.count-1 ? i=0:i=1;                           
                    this.index = parseInt(this.index) + i;                            
                    this.index == me.count-1 ? me.last = true : me.last = false;                            
                    me.first = false;
                };
            };
            //console.log(‘end ‘+me.first+‘, ‘+me.last);
            
            
            $(this.slider).addClass(me.animateClass);
            this.slider.style.webkitTransform = "translate3d(" + (-this.index*me.scrollWidth) + "px,0 ,0)";                    

            if($(me.sImg).size()>0){ // 判断缩略图翻页[1]
                var i = me.events.index+1;
                var p = Math.ceil(i/me.page)-1;
                me.scrollPage(p);
                $(me.sImg).children().removeClass(me.sImgActiveClass).eq(me.events.index).addClass(me.sImgActiveClass);
            };
            
            
            // 解绑事件
            this.slider.removeEventListener(‘touchmove‘, this, false);
            this.slider.removeEventListener(‘touchend‘, this, false);
            me.class();


            // 缩放结束
            if(me.scale>0){
                var active = ‘.‘+me.itemActiveClass;                        
                $(active, me.target).css({‘webkitTransform‘:‘scale(‘+(me.scale+1)+‘)‘});
                $(‘.j-prev‘, me.target).add(‘.j-next‘, me.target).css(‘webkitTransform‘, ‘scale(1)‘);
                $(me.target).children().addClass(‘f-slow‘);                        
            };
            


            
            //btn
            if($(me.btn).size()>0){
                var onlyone = me.count==1?true:false;
                if(me.events.index==0){
                    $(‘.prev‘, me.btn).hide();                            
                    if(!(me.count==1))$(‘.next‘, me.btn).show();
                    //me.first=true;
                    //me.last=false;
                }else if(me.events.index==me.count-1){
                    $(‘.prev‘, me.btn).show();
                    $(‘.next‘, me.btn).hide();
                    //me.first=false;
                    //me.last=true;                            
                }else{
                    $(‘.prev‘, me.btn).show();
                    $(‘.next‘, me.btn).show();
                    //me.first=false;
                    //me.last=false;                            
                };
            };

            //自定义touchend事件
            if(element.end){
                element.end.call(me, event);
            };
            
            //console.log(me.target+‘, ‘+me.first+‘, ‘+me.last)    ;
        }
    },
    
    this.class = function(){
        
        // 当前，上一个，下一个加类名
        var children = $(element.target).children(),
            i = this.events.index;
            children.removeClass(me.itemActiveClass);
        children.removeClass(‘j-active‘).eq(i).addClass(me.itemActiveClass);
        if(me.count>1){
            children.removeClass(‘j-next‘).eq(i+1).addClass(‘j-next‘);
            children.removeClass(‘j-prev‘).eq(i-1).addClass(‘j-prev‘);
        };
        
        if(me.titleId){
            $(‘#‘+me.titleId).children().eq(i).addClass(me.titleActiveClass);
        };
    },
    
    // 初始化
    this.init = function() {
        // this指slider对象
        var self = this;
        
        $(this.target).find(‘._target‘).each(function(){
            var o = $(this);
            o.scroll(function(){
                if(!started){ // 滚动结束后继续监控原生滚动条，以解决弹性滚动问题
                    var pwidth = o.width();
                    var width = o.children().width();
                    var left = o.scrollLeft();
                    first = left==0;
                    last = pwidth+left>=width;
                    console.log(first);
                    console.log(last);
                    if(first && last){
                        o.addClass(‘_left‘);
                        o.addClass(‘_right‘);
                    }else if(first){
                        o.addClass(‘_left‘);
                        o.removeClass(‘_right‘);
                    }else if(last){
                        o.addClass(‘_right‘);
                        o.removeClass(‘_left‘);
                    }else{
                        o.removeClass(‘_left‘);
                        o.removeClass(‘_right‘);
                    }
                }
            });
        });
        
        // addEventListener第二个参数可以传一个对象，会调用该对象的handleEvent属性
        if(!!self.touch) this.slider.addEventListener(‘touchstart‘, self.events, false);
    };
    
    if($(me.btn).size()>0){
        
        //初始化
        $(‘.prev‘,me.btn).hide();
        if(me.count==1)$(‘.next‘,me.btn).hide();
        
        $(me.btn).click(function(event){
            var t = {
                p : $(event.target).hasClass(‘prev‘),
                n : $(event.target).hasClass(‘next‘),                    
            };
            if(!t.p&&!t.n)return false;    
            
            if(t.p){
                if(me.events.index==0){
                    return false;
                }else if(me.events.index==1){
                    me.first = true;
                    me.last = false;                                    
                };
                me.events.index -= 1;
                if(me.events.index==0){
                    $(‘.prev‘,me.btn).hide();
                    $(‘.next‘,me.btn).show();
                }else{
                    $(‘.prev‘,me.btn).show();
                    $(‘.next‘,me.btn).show();
                };
            }else if(t.n){
                if(me.events.index==me.count-1){
                    return false;
                }else if(me.events.index==me.count-2){
                    me.first = false;
                    me.last = true;                                    
                };
                me.events.index += 1;
                if(me.events.index==me.count-1){
                    $(‘.prev‘,me.btn).show();
                    $(‘.next‘,me.btn).hide();
                }else{
                    $(‘.prev‘,me.btn).show();
                    $(‘.next‘,me.btn).show();
                };
            };
            
            me.scrollTo(me.events.index);
            
        });                
    };
    
    this.init();
};