// 调用        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();};