function resumeerror() {return true;} //window.onerror=resumeerror; function nopic(){ var img=event.srcelement; img.src="../files/nopic.png"; img.onerror=null; } /*! * glide.js * version: 1.0.65 * simple, lightweight and fast jquery slider * author: @jedrzejchalubek * site: http://jedrzejchalubek.com/ * licensed under the mit license */ ;(function ($, window, document, undefined) { var name = 'glide', defaults = { // {int or bool} false for turning off autoplay autoplay: 4000, // {bool} pause autoplay on mouseover slider hoverpause: true, // {bool} circual play circular: true, // {int} animation time animationduration: 500, // {string} animation easing function animationtimingfunc: 'cubic-bezier(0.165, 0.840, 0.440, 1.000)', /** * {bool or string} show/hide/appendto arrows * true for append arrows to slider wrapper * false for not appending arrows * id or class name (e.g. '.class-name') for appending to specific html markup */ arrows: true, // {string} arrows wrapper class arrowswrapperclass: 'slider__arrows', // {string} main class for both arrows arrowmainclass: 'slider__arrows-item', // {string} right arrow arrowrightclass: 'slider__arrows-item--right', // {string} right arrow text arrowrighttext: 'next', // {string} left arrow arrowleftclass: 'slider__arrows-item--left', // {string} left arrow text arrowlefttext: 'prev', navigationimg: false, /** * {bool or string} show/hide/appendto bullets navigation * true for append arrows to slider wrapper * false for not appending arrows * id or class name (e.g. '.class-name') for appending to specific html markup */ navigation: true, // {bool} center bullet navigation navigationcenter: true, // {string} navigation class navigationclass: 'slider__nav', // {string} navigation item class navigationitemclass: 'slider__nav-item', // {string} current navigation item class navigationcurrentitemclass: 'slider__nav-item--current', // {bool} slide on left/right keyboard arrows press keyboard: true, // {int or bool} touch settings touchdistance: 60, // {function} callback before plugin init beforeinit: function() {}, // {function} callback after plugin init afterinit: function() {}, // {function} callback before slide change beforetransition: function() {}, // {function} callback after slide change aftertransition: function() {} }; /** * slider constructor * @param {object} parent * @param {object} options */ function glide(parent, options) { // cache this var self = this; // extend options this.options = $.extend({}, defaults, options); // current slide id this.currentslide = 0; // if css3 transition isn't supported switch csssupport variable to false and use $.animate() this.csssupport = ( !this.css.issupported("transition") || !this.css.issupported("transform") ) ? false : true; // if circular set offset, two cloned slides this.offset = (this.options.circular) ? 2 : 0; // callbacks before plugin init this.options.beforeinit.call(this); // sidebar this.parent = parent; // initialize this.init(); // start autoplay this.play(); // callback after plugin init this.options.afterinit.call(this); /** * api * returning slider methods */ return { /** * get current slide number * @return {int} */ current: function() { return -(self.currentslide) + 1; }, /** * reinit * rebuild and recalculate dimensions of slider elements */ reinit: function() { self.init(); }, /** * destroy * revert init modifications and freeze slides */ destroy: function(){ self.destroy(); }, /** * start autoplay */ play: function() { self.play(); }, /** * stop autoplay */ pause: function() { self.pause(); }, /** * slide one forward * @param {function} callback */ next: function(callback) { self.slide(1, false, callback); }, /** * slide one backward * @param {function} callback */ prev: function(callback) { self.slide(-1, false, callback); }, /** * jump to specifed slide * @param {int} distance * @param {function} callback */ jump: function(distance, callback) { self.slide(distance-1, true, callback); }, /** * append navigation to specifet target * @param {mixed} target */ nav: function(target) { /** * if navigation wrapper already exist * remove it, protection before doubled navigation */ if (self.navigation.wrapper) self.navigation.wrapper.remove(); // while target isn't specifed, use slider wrapper self.options.navigation = (target) ? target : self.options.navigation; // build self.navigation(); }, /** * append arrows to specifet target * @param {mixed} target */ arrows: function(target) { /** * if arrows wrapper already exist * remove it, protection before doubled arrows */ if (self.arrows.wrapper) self.arrows.wrapper.remove(); // while target isn't specifed, use slider wrapper self.options.arrows = (target) ? target : self.options.arrows; // build self.arrows(); } }; } /** * building slider */ glide.prototype.build = function() { /** * attatch bindings */ this.bindings(); /** * there is more than one slide */ if (this.slides.length > 1) { /** * circular * if circular option is true * append left and right arrow */ if (this.options.circular) this.circular(); /** * arrows * if arrows option is true * append left and right arrow */ if (this.options.arrows) this.arrows(); /** * navigation * if navigation option is true * append navigation item for each slide */ if (this.options.navigation) this.navigation(); } /** * attatch events */ this.events(); }; /** * build circular dom elements * clone first and last slide * set wrapper width with addional slides * move slider wrapper to first slide */ glide.prototype.circular = function() { /** * clone first and last slide * and set width for each */ this.firstclone = this.slides.filter(':first-child').clone().width(this.slides.spread); this.lastclone = this.slides.filter(':last-child').clone().width(this.slides.spread); //��¡��ͼƭҫȥ����ʵ��class $(this.firstclone).removeclass("real"); $(this.lastclone).removeclass("real"); /** * append clodes slides to slider wrapper at the beginning and end * increase wrapper with with values of addional slides * clear translate and skip cloned last slide at the beginning */ this.wrapper.append(this.firstclone).prepend(this.lastclone).width( this.parent.width() * (this.slides.length+2) ) .trigger('cleartransition') .trigger('settranslate', [-this.slides.spread]); }; /** * building navigation dom */ glide.prototype.navigation = function() { this.navigation.items = {}; // navigation wrapper this.navigation.wrapper = $('
', { 'class': this.options.navigationclass }).appendto( /** * setting append target * if option is true set default target, that is slider wrapper * else get target set in options * @type {bool or string} */ (this.options.navigation === true) ? this.parent : this.options.navigation ); for (var i = 0; i < this.slides.length; i++) { if(this.options.navigationimg) { var src = $(this.slides[i]).children("a").children("img").attr('src'); this.navigation.items[i] = $('', { 'src': src, 'class': this.options.navigationitemclass, 'data-distance': i }).appendto(this.navigation.wrapper); }else{ this.navigation.items[i] = $('', { 'href': '#', 'class': this.options.navigationitemclass, // direction and distance -> item index forward 'data-distance': i }).appendto(this.navigation.wrapper); } } // add navcurrentitemclass to the first navigation item this.navigation.items[0].addclass(this.options.navigationcurrentitemclass); // if centered option is true if (this.options.navigationcenter && !this.options.navigationimg) { // center bullet navigation this.navigation.wrapper.css({ 'left': '50%', 'width': this.navigation.wrapper.children().outerwidth(true) * this.navigation.wrapper.children().length, 'margin-left': -(this.navigation.wrapper.outerwidth(true)/2) }); } }; /** * building arrows dom */ glide.prototype.arrows = function() { /** * arrows wrapper * @type {obejct} */ this.arrows.wrapper = $('', { 'class': this.options.arrowswrapperclass }).appendto( /** * setting append target * if option is true set default target, that is slider wrapper * else get target set in options * @type {bool or string} */ (this.options.arrows === true) ? this.parent : this.options.arrows ); /** * right arrow * @type {obejct} */ this.arrows.right = $('', { 'href': '#', 'class': this.options.arrowmainclass + ' ' + this.options.arrowrightclass, // direction and distance -> one forward 'data-distance': '1', 'html': this.options.arrowrighttext }).appendto(this.arrows.wrapper); /** * left arrow * @type {object} */ this.arrows.left = $('', { 'href': '#', 'class': this.options.arrowmainclass + ' ' + this.options.arrowleftclass, // direction and distance -> one backward 'data-distance': '-1', 'html': this.options.arrowlefttext }).appendto(this.arrows.wrapper); }; /** * function bindings */ glide.prototype.bindings = function() { var self = this, o = this.options, prefix = this.css.getprefix(); /** * setup slider wrapper bindings * for translate and transition control */ this.wrapper.bind({ /** * set transition */ 'settransition': function() { $(this).css( prefix + 'transition', prefix + 'transform ' + o.animationduration + 'ms ' + o.animationtimingfunc); }, /** * clear transition * for immediate jump effect */ 'cleartransition': function() { $(this).css( prefix + 'transition', 'none'); }, /** * set translate value * @param {object} event * @param {ind} translate */ 'settranslate': function(event, translate) { // if css3 suported set translate3d if (self.csssupport) $(this).css( prefix + 'transform', 'translate3d(' + translate + 'px, 0px, 0px)'); // if not set left margin else $(this).css('margin-left', translate); } }); }; /** * events controllers */ glide.prototype.events = function() { /** * swipe * if swipe option is true * attach touch events */ if (this.options.touchdistance) { this.parent.on({ 'touchstart mspointerdown': $.proxy(this.events.touchstart, this), 'touchmove mspointermove': $.proxy(this.events.touchmove, this), 'touchend mspointerup': $.proxy(this.events.touchend, this) }); } /** * arrows * if arrows exists * attach click event */ if (this.arrows.wrapper) { $(this.arrows.wrapper).children().on('click touchstart', $.proxy(this.events.arrows, this) ); } /** * navigation * if navigation exists * attach click event */ if (this.navigation.wrapper) { $(this.navigation.wrapper).children().on('click touchstart', $.proxy(this.events.navigation, this) ); } /** * keyboard * if keyboard option is true * attach press event */ if (this.options.keyboard) { $(document).on('keyup.glidekeyup', $.proxy(this.events.keyboard, this) ); } /** * slider hover * if hover option is true * attach hover event */ if (this.options.hoverpause) { this.parent.on('mouseover mouseout', $.proxy(this.events.hover, this) ); } /** * slider resize * on window resize * attach resize event */ $(window).on('resize', $.proxy(this.events.resize, this) ); }; /** * navigation event controller * on click in navigation item get distance * then slide specified distance with jump */ glide.prototype.events.navigation = function(event) { if ( !this.wrapper.attr('disabled') ) { // prevent default behaviour event.preventdefault(); // slide distance specified in data attribute this.slide( $(event.currenttarget).data('distance'), true ); } }; /** * arrows event controller * on click in arrows get direction and distance * then slide specified distance without jump * @param {obejct} event */ glide.prototype.events.arrows = function(event) { if ( !this.wrapper.attr('disabled') ) { // prevent default behaviour event.preventdefault(); // slide distance specified in data attribute this.slide( $(event.currenttarget).data('distance'), false ); } }; /** * keyboard arrows event controller * keyboard left and right arrow keys press */ glide.prototype.events.keyboard = function(event) { if ( !this.wrapper.attr('disabled') ) { // next if (event.keycode === 39 && this.slides.length > 1) this.slide(1); // prev if (event.keycode === 37 && this.slides.length > 1) this.slide(-1); } }; /** * when mouse is over slider, pause autoplay * on out, start autoplay again */ glide.prototype.events.hover = function(event) { // pasue autoplay this.pause(); // when mouse left slider or touch end, start autoplay anew if (event.type === 'mouseout') this.play(); }; /** * when resize browser window * reinit plugin for new slider dimensions * correct crop to current slide */ glide.prototype.events.resize = function(event) { // reinit plugin (set new slider dimensions) this.dimensions(); // crop to current slide if(this.slides.length > 1) this.slide(0); }; /** * disable events thats controls slide changes */ glide.prototype.disableevents = function() { this.wrapper.attr( "disabled", true ); }; /** * enable events thats controls slide changes */ glide.prototype.enableevents = function() { this.wrapper.attr( "disabled", false ); }; /** * touch start * @param {object} e event */ glide.prototype.events.touchstart = function(event) { if(ispc()) { return; } if ( !this.wrapper.attr('disabled') ) { // cache event var touch = event.originalevent.touches[0] || event.originalevent.changedtouches[0]; // get touch start points this.events.touchstartx = touch.pagex; this.events.touchstarty = touch.pagey; this.events.touchsin = null; } }; /** * touch move * from swipe length segments calculate swipe angle * @param {obejct} e event */ glide.prototype.events.touchmove = function(event) { if (this.slides.length == 1) { return; } if(ispc()) { return; } if ( !this.wrapper.attr('disabled') ) { // cache event var touch = event.originalevent.touches[0] || event.originalevent.changedtouches[0]; // calculate start, end points var subexsx = touch.pagex - this.events.touchstartx; var subeysy = touch.pagey - this.events.touchstarty; // bitwise subexsx pow var powex = math.abs( subexsx << 2 ); // bitwise subeysy pow var powey = math.abs( subeysy << 2 ); // calculate the length of the hypotenuse segment var touchhypotenuse = math.sqrt( powex + powey ); // calculate the length of the cathetus segment var touchcathetus = math.sqrt( powey ); // calculate the sine of the angle this.events.touchsin = math.asin( touchcathetus/touchhypotenuse ); if ( (this.events.touchsin * (180 / math.pi)) < 45 ) event.preventdefault(); } }; /** * touch end * @param {object} e event */ glide.prototype.events.touchend = function(event) { if (this.slides.length == 1) { return; } if(ispc()) { return; } if ( !this.wrapper.attr('disabled') ) { // cache event var touch = event.originalevent.touches[0] || event.originalevent.changedtouches[0]; // calculate touch distance var touchdistance = touch.pagex - this.events.touchstartx; // while touch is positive and greater than distance set in options if ( (touchdistance > this.options.touchdistance) && ( (this.events.touchsin * (180 / math.pi)) < 45) ) { // slide one backward this.slide(-1); // while touch is negative and lower than negative distance set in options } else if ( (touchdistance < -this.options.touchdistance) && ( (this.events.touchsin * (180 / math.pi)) < 45) ) { // slide one forward this.slide(1); } } }; /** * slides change & animate logic * @param {int} distance * @param {bool} jump * @param {function} callback */ glide.prototype.slide = function(distance, jump, callback) { /** * stop autoplay * clearing timer */ this.pause(); // callbacks before slide change this.options.beforetransition.call(this); // setup variables var self = this, currentslide = (jump) ? 0 : this.currentslide, slideslength = -(this.slides.length-1), fromfirst = false, fromlast = false; /** * check if current slide is first and direction is previous, then go to last slide * or current slide is last and direction is next, then go to the first slide * else change current slide normally */ if ( currentslide === 0 && distance === -1 ) { fromfirst = true; currentslide = slideslength; } else if ( currentslide === slideslength && distance === 1 ) { fromlast = true; currentslide = 0; } else { currentslide = currentslide + (-distance); } /** * crop to current slide. * mul slide width by current slide number. */ var offset = this.slides.spread * currentslide; /** * while circular decrease offset with the width of single slide * when fromfirst and fromlast flags are set, unbind events thats controls changing * when fromlast flags is set, set offset to slide width mulled by slides count without cloned slides * when fromfirst flags is set, set offset to zero */ if (this.options.circular) { offset = offset - this.slides.spread; if (fromlast || fromfirst) this.disableevents(); if (fromlast) offset = this.slides.spread * (slideslength - 2); if (fromfirst) offset = 0; } /** * slide change animation * while css3 is supported use offset * if not, use $.animate(); */ if (this.csssupport) this.wrapper.trigger('settransition').trigger('settranslate', [offset]); else this.wrapper.stop().animate({ 'margin-left': offset }, this.options.animationduration); /** * while circular */ if (this.options.circular) { /** * when fromfirst and fromlast flags are set * after animation clear transition and bind events that control slides changing */ if (fromfirst || fromlast) { this.afteranimation(function(){ self.wrapper.trigger('cleartransition'); self.enableevents(); }); } /** * when fromlast flag is set * after animation make immediate jump from cloned slide to proper one */ if (fromlast) { this.afteranimation(function(){ fromlast = false; self.wrapper.trigger('settranslate', [-self.slides.spread]); }); } /** * when fromfirst flag is set * after animation make immediate jump from cloned slide to proper one */ if (fromfirst) { this.afteranimation(function(){ fromfirst = false; self.wrapper.trigger('settranslate', [self.slides.spread * (slideslength-1)]); }); } } // set to navigation item current class if (this.options.navigation && this.navigation.wrapper) { $('.' + this.options.navigationclass, (this.options.navigation === true) ? this.parent : this.options.navigation).children() .eq(-currentslide) .addclass(this.options.navigationcurrentitemclass) .siblings() .removeclass(this.options.navigationcurrentitemclass); } // update current slide globaly this.currentslide = currentslide; // callbacks after slide change this.afteranimation(function(){ self.options.aftertransition.call(self); if ( (callback !== 'undefined') && (typeof callback === 'function') ) callback(); }); /** * start autoplay * setting up timer */ this.play(); //���ͼƭ�ĸ߶ȸ���slider�ĸ߶� mycurrentslide = -this.currentslide + 1; fixslidermaxheight(); }; /** * autoplay logic * setup counting */ glide.prototype.play = function() { // cache this var self = this; /** * if autoplay turn on * slide one forward after a set time */ if (this.options.autoplay) { this.auto = setinterval(function() { //alert(self.slides.length); if(self.slides.length > 1) self.slide(1, false); }, this.options.autoplay); } }; /** * autoplay pause * clear counting */ glide.prototype.pause = function() { /** * if autoplay turn on * clear interial */ if (this.options.autoplay) this.auto = clearinterval(this.auto); }; /** * call callback after animation duration * added 10 ms to duration to be sure is fired after animation * @param {function} callback */ glide.prototype.afteranimation = function(callback) { settimeout(function(){ callback(); }, this.options.animationduration + 10); }; /** * dimensions * get & set dimensions of slider elements */ glide.prototype.dimensions = function() { // get slide width this.slides.spread = this.parent.width(); // set wrapper width this.wrapper.width(this.slides.spread * (this.slides.length + this.offset)); // set slide width this.slides.add(this.firstclone).add(this.lastclone).width(this.slides.spread); }; /** * destroy * revert init modifications and freeze slides */ glide.prototype.destroy = function() { this.parent.unbind(); this.wrapper.unbind(); this.wrapper.removeattr("style"); $(this.navigation.wrapper).children().unbind(); $(this.arrows.wrapper).children().unbind(); this.slide(0, true); this.pause(); if(this.options.circular) { this.firstclone.remove(); this.lastclone.remove(); } }; /** * initialize * set wrapper * set slides * set animation type */ glide.prototype.init = function() { // set slides wrapper this.wrapper = this.parent.children(); // set slides this.slides = this.wrapper.children(); // set slider dimentions //this.dimensions(); // build dom this.build(); // reinit plugin (set new slider dimensions) $(document).trigger("resize"); }; /** * methods for css3 management */ glide.prototype.css = { /** * check css3 support * @param {string} declaration name to check * @return {boolean} */ issupported: function(declaration) { var issupported = false, prefixes = 'khtml ms o moz webkit'.split(' '), clone = document.createelement('div'), declarationcapital = null; declaration = declaration.tolowercase(); if (clone.style[declaration] !== undefined) issupported = true; if (issupported === false) { declarationcapital = declaration.charat(0).touppercase() + declaration.substr(1); for( var i = 0; i < prefixes.length; i++ ) { if( clone.style[prefixes[i] + declarationcapital ] !== undefined ) { issupported = true; break; } } } if (window.opera) { if (window.opera.version() < 13) issupported = false; } if (issupported === 'undefined' || issupported === undefined) issupported = false; return issupported; }, /** * get browser css prefix * @return {string} returns prefix in "-{prefix}-" format */ getprefix: function () { if (!window.getcomputedstyle) return ''; var styles = window.getcomputedstyle(document.documentelement, ''); return '-' + (array.prototype.slice .call(styles) .join('') .match(/-(moz|webkit|ms)-/) || (styles.olink === '' && ['', 'o']) )[1] + '-'; } }; $.fn[name] = function(options) { return this.each(function () { if ( !$.data(this, 'api_' + name) ) { $.data(this, 'api_' + name, new glide($(this), options) ); } }); }; })(jquery, window, document); var mycurrentslide = 1; function fixslidermaxheight() { //���ͼƭ�ĸ߶ȸ���slider�ĸ߶� var newheight = $(".detailglide .slider li:eq(" + mycurrentslide + ")").height(); $(".detailglide .slider").css({"max-height":newheight + "px"}); //alert(newheight); } $(window).load(function(){fixslidermaxheight();})