(function($) { 'use strict'; var defaults = { slide: 0, delay: 5000, loop: true, preload: false, preloadImage: false, preloadVideo: false, timer: true, overlay: false, autoplay: true, shuffle: false, cover: true, color: null, align: 'center', valign: 'center', firstTransition: null, firstTransitionDuration: null, transition: 'fade', transitionDuration: 1000, transitionRegister: [], animation: null, animationDuration: 'auto', animationRegister: [], slidesToKeep: 1, "arrow-status": 'none', // none|disabled|hide|show "arrow-hookStatus": 'hide', // none|disabled|hide|show "arrow-prevHook": null, "arrow-nextHook": null, "dot-status": 'none', //none|show "dot-hook": null, "dot-hookStatus": 'clone', // none|clone|clone-id prevTransparent: true, init: function() {}, play: function() {}, pause: function() {}, walk: function() {}, slides: [// { // src: null, // color: null, // delay: null, // align: null, // valign: null, // transition: null, // transitionDuration: null, // animation: null, // animationDuration: null, // cover: true, // video: { // src: [], // mute: true, // loop: true // } // ... ] }; var videoCache = {}; var Vegas = function(elmt, options) { this.elmt = elmt; this.$elmt = $(elmt); this.settings = $.extend({}, defaults, $.vegas.defaults, options); this._init_settings(); this.slide = this.settings.slide; this.total = this.settings.slides.length; this.noshow = this.total < 2; this.paused = !this.settings.autoplay || this.noshow; this.ended = false; this.$timer = null; this.$overlay = null; this.$slide = null; this.timeout = null; this.first = true; this.transitions = ['fade', 'fade2', 'blur', 'blur2', 'flash', 'flash2', 'negative', 'negative2', 'burn', 'burn2', 'slideLeft', 'slideLeft2', 'slideRight', 'slideRight2', 'slideUp', 'slideUp2', 'slideDown', 'slideDown2', 'zoomIn', 'zoomIn2', 'zoomOut', 'zoomOut2', 'swirlLeft', 'swirlLeft2', 'swirlRight', 'swirlRight2']; this.animations = ['kenburns', 'kenburnsLeft', 'kenburnsRight', 'kenburnsUp', 'kenburnsUpLeft', 'kenburnsUpRight', 'kenburnsDown', 'kenburnsDownLeft', 'kenburnsDownRight']; if (!(this.settings.transitionRegister instanceof Array)) { this.settings.transitionRegister = [this.settings.transitionRegister]; } if (!(this.settings.animationRegister instanceof Array)) { this.settings.animationRegister = [this.settings.animationRegister]; } this.transitions = this.transitions.concat(this.settings.transitionRegister); this.animations = this.animations.concat(this.settings.animationRegister); this.support = { objectFit: 'objectFit'in document.body.style, transition: 'transition'in document.body.style || 'WebkitTransition'in document.body.style, video: $.vegas.isVideoCompatible() }; if (this.settings.shuffle === true) { this.shuffle(); } this._init(); this._arrows(); this._dots(); }; Vegas.prototype = { _init_settings: function(options) { var attributes = this.elmt.attributes; var settings = this.settings; window.attr_merge(attributes, settings); this.slide = settings.slide; var slides = []; this.$elmt.children().each(function() { var $this = $(this); if ($this.is('img')) { slides.push({ src: $this.attr('src'), }); if ($this.attr('data-transition') != undefined && $this.attr('data-transition') != settings.transition) { slides[slides.length - 1].transition = $this.attr('data-transition'); } if ($this.attr('data-animation') != undefined && $this.attr('data-animation') != settings.animation) { slides[slides.length - 1].transition = $this.attr('data-animation'); } } if ($this.is('video')) { if ($this.children().length > 0) { slides.push({ video: { src: [], loop: eval($this.attr('data-loop') || false), mute: eval($this.attr('data-mute') || true), } }); var video_srces = []; $this.children().each(function() { video_srces.push($(this).attr('src')); }); slides[slides.length - 1].video.src = video_srces; } else { slides.push({ video: { src: [$this.attr('src')], loop: eval($this.attr('data-loop') || false), mute: eval($this.attr('data-mute') || true), } }); } } }); this.settings.slides = slides; }, _arrows: function(){ let settings = Object.keys(this.settings).reduce(function (carry, key) { key.includes('arrow-') && (carry[key.replace('arrow-', '')] = this.settings[key]) return carry; }, {}); let this_prev = this.$elmt.find('.vegas-prev'); let this_next = this.$elmt.find('.vegas-next'); if (settings.prevHook != null) { $("body").on("click", settings.prevHook, function() { $('[data-arrow-prevHook="' + settings.prevHook + '"] .vegas-prev').click(); }); } if (settings.nextHook != null) { $("body").on("click", settings.nextHook, function() { $('[data-arrow-nextHook="' + settings.nextHook + '"] .vegas-next').click(); }); } if (settings.status == 'none') { this_prev.hide(); this_next.hide(); } else if (settings.status == 'hide') { if (this.slide == 0) { this.$elmt.find('.vegas-prev').hide(); } this.$elmt.on('vegaschange', function() { if ($(this).vegas('current') <= 0) { $(this).find('.vegas-prev').hide(); } else { $(this).find('.vegas-prev').show(); } if ($(this).vegas('current') >= ($(this).vegas('__total') - 1)) { $(this).find('.vegas-next').hide(); } else { $(this).find('.vegas-next').show(); } }); } else if (settings.status == 'disabled') { if (this.slide == 0) { this.$elmt.find('.vegas-prev').addClass('vegas-disabled'); } this.$elmt.on('vegaschange', function() { if ($(this).vegas('current') <= 0) { $(this).find('.vegas-prev').addClass('vegas-disabled'); } else { $(this).find('.vegas-prev').removeClass('vegas-disabled'); } if ($(this).vegas('current') >= ($(this).vegas('__total') - 1)) { $(this).find('.vegas-next').addClass('vegas-disabled'); } else { $(this).find('.vegas-next').removeClass('vegas-disabled'); } }); } if (settings.hookStatus == 'none') { $(settings.prevHook).hide(); $(settings.nextHook).hide(); } else if (settings.hookStatus == 'hide') { if (this.slide == 0) { $(settings.prevHook).hide(); } this.$elmt.on('vegaschange', function() { if ($(this).vegas('current') <= 0) { $(settings.prevHook).hide(); } else { $(settings.prevHook).show(); } if ($(this).vegas('current') >= ($(this).vegas('__total') - 1)) { $(settings.nextHook).hide(); } else { $(settings.nextHook).show(); } }); } else if (settings.hookStatus == 'disabled') { if (this.slide == 0) { $(settings.prevHook).addClass('vegas-disabled'); } this.$elmt.on('vegaschange', function() { if ($(this).vegas('current') <= 0) { $(settings.prevHook).addClass('vegas-disabled'); } else { $(settings.prevHook).removeClass('vegas-disabled'); } if ($(this).vegas('current') >= ($(this).vegas('__total') - 1)) { $(settings.nextHook).addClass('vegas-disabled'); } else { $(settings.nextHook).removeClass('vegas-disabled'); } }); } }, _dots: function() { let settings = Object.keys(this.settings).reduce(function (carry, key) { key.includes('dot-') && (carry[key.replace('dot-', '')] = this.settings[key]) return carry; }, {}); let dots = this.$elmt.find('.vegas-dots .vegas-dot').eq(0); let dataHook = $(settings.hook); let dataHookChild = $(settings.hook).children().eq(0); for (var i = 1; i < this.settings.slides.length; i++) { dots.clone(true).appendTo(this.$elmt.find('.vegas-dots')); if (settings.hookStatus == "clone") { dataHookChild.clone(true).appendTo(dataHook); } if (settings.hookStatus == "clone-id") { const index = i; var vegas_dot = dataHookChild.clone(true); vegas_dot.html(function(x, oldHTML) { return oldHTML.replace(/\${i}/g, index + 1); }).appendTo(dataHook); } } if (settings.hookStatus == "clone-id") { dataHookChild.html(function(x, oldHTML) { return oldHTML.replace(/\${i}/g, 1); }); } if (settings.status == "hide") { this.$elmt.find('.vegas-dots').hide(); } this.$elmt.find('.vegas-dots .vegas-dot').eq(this.slide).addClass('vegas-dot-active'); $(settings.hook).children().eq(this.slide).addClass('vegas-dot-active'); this.$elmt.on('vegaschange', function() { $(this).find('.vegas-dots .vegas-dot.vegas-dot-active').removeClass('vegas-dot-active'); $(settings.hook).children('.vegas-dot-active').removeClass('vegas-dot-active'); var active_dot = $(this).vegas('current') > $(this).find('.vegas-dots .vegas-dot').length - 1 ? $(this).find('.vegas-dots .vegas-dot').length - 1 : $(this).vegas('current'); active_dot = $(this).vegas('current') < 0 ? 0 : active_dot; $(this).find('.vegas-dots .vegas-dot').eq(active_dot).addClass('vegas-dot-active'); $(settings.hook).children().eq(active_dot).addClass('vegas-dot-active'); }); var dot_clone = settings.hook; $(settings.hook).children().on('click', function() { $('[data-dot-hook="' + dot_clone + '"] .vegas-dots').children('.vegas-dot').eq($(this).index()).click(); }); }, _init: function() { var $content, $contentScroll, $overlay, $timer, isBody = this.elmt.tagName === 'BODY', timer = this.settings.timer, overlay = this.settings.overlay, self = this; // Preloading this._preload(); // Div with scrollable content if (!isBody) { $contentScroll = $('
'); $content = $('
').css('overflow', this.$elmt.css('overflow')).css('padding', this.$elmt.css('padding')); // Some browsers don't compute padding shorthand if (!this.$elmt.css('padding')) { $content.css('padding-top', this.$elmt.css('padding-top')).css('padding-bottom', this.$elmt.css('padding-bottom')).css('padding-left', this.$elmt.css('padding-left')).css('padding-right', this.$elmt.css('padding-right')); } this.$elmt.css('padding', 0); this.$elmt.clone(true).children().appendTo($content); $content.children().not('.vegas-dot-controls').wrapAll("
"); $content.append($('
')); $content.find('.vegas-arrow-controls').append($('
')).find('.vegas-prev').append($('
')); $content.find('.vegas-arrow-controls').append($('
')).find('.vegas-next').append($('
')); $content.append($('
')).find('.vegas-dot-controls').append($('
')).find('.vegas-dots').append($('
')); this.elmt.innerHTML = ''; } // Timer if (timer && this.support.transition) { $timer = $('
'); this.$timer = $timer; this.$elmt.prepend($timer); } // Overlay if (overlay) { $overlay = $('
'); if (typeof overlay === 'string') { $overlay.css('background-image', 'url(' + overlay + ')'); } this.$overlay = $overlay; this.$elmt.prepend($overlay); } // Container this.$elmt.addClass('vegas-container'); if (!isBody) { this.$elmt.append($contentScroll); $contentScroll.append($content); } this.$elmt.data('vegas', this); setTimeout(function() { self.trigger('init'); self._goto(self.slide); if (self.settings.autoplay) { self.trigger('play'); } }, 1); }, _preload: function() { var img, i; for (i = 0; i < this.settings.slides.length; i++) { if (this.settings.preload || this.settings.preloadImages) { if (this.settings.slides[i].src) { img = new Image(); img.src = this.settings.slides[i].src; } } if (this.settings.preload || this.settings.preloadVideos) { if (this.support.video && this.settings.slides[i].video) { if (this.settings.slides[i].video instanceof Array) { this._video(this.settings.slides[i].video); } else { this._video(this.settings.slides[i].video.src); } } } } }, _random: function(array) { return array[Math.floor(Math.random() * array.length)]; }, _slideShow: function() { var self = this; if (this.total > 1 && !this.ended && !this.paused && !this.noshow) { this.timeout = setTimeout(function() { self.next(); }, this._options('delay')); } }, _timer: function(state) { var self = this; clearTimeout(this.timeout); if (!this.$timer) { return; } this.$timer.removeClass('vegas-timer-running').find('div').css('transition-duration', '0ms'); if (this.ended || this.paused || this.noshow) { return; } if (state) { setTimeout(function() { self.$timer.addClass('vegas-timer-running').find('div').css('transition-duration', self._options('delay') - 100 + 'ms'); }, 100); } }, _video: function(srcs) { var video, source, cacheKey = srcs.toString(); if (videoCache[cacheKey]) { return videoCache[cacheKey]; } if (!(srcs instanceof Array)) { srcs = [srcs]; } video = document.createElement('video'); video.preload = true; srcs.forEach(function(src) { source = document.createElement('source'); source.src = src; video.appendChild(source); }); videoCache[cacheKey] = video; return video; }, _fadeOutSound: function(video, duration) { var self = this, delay = duration / 10, volume = video.volume - 0.09; if (volume > 0) { video.volume = volume; setTimeout(function() { self._fadeOutSound(video, duration); }, delay); } else { video.pause(); } }, _fadeInSound: function(video, duration) { var self = this, delay = duration / 10, volume = video.volume + 0.09; if (volume < 1) { video.volume = volume; setTimeout(function() { self._fadeInSound(video, duration); }, delay); } }, _options: function(key, i) { if (i === undefined) { i = this.slide; } if (this.settings.slides[i][key] !== undefined) { return this.settings.slides[i][key]; } return this.settings[key]; }, _goto: function(nb) { if (typeof this.settings.slides[nb] === 'undefined') { nb = 0; } this.slide = nb; var $slide, $inner, $video, $slides = this.$elmt.children('.vegas-slide'), src = this.settings.slides[nb].src, videoSettings = this.settings.slides[nb].video, delay = this._options('delay'), align = this._options('align'), valign = this._options('valign'), cover = this._options('cover'), color = this._options('color') || this.$elmt.css('background-color'), self = this, total = $slides.length, video, img; var transition = this._options('transition'), transitionDuration = this._options('transitionDuration'), animation = this._options('animation'), animationDuration = this._options('animationDuration'); if (this.settings.firstTransition && this.first) { transition = this.settings.firstTransition || transition; } if (this.settings.firstTransitionDuration && this.first) { transitionDuration = this.settings.firstTransitionDuration || transitionDuration; } if (this.first) { this.first = false; } if (cover !== 'repeat') { if (cover === true) { cover = 'cover'; } else if (cover === false) { cover = 'contain'; } } if (transition === 'random' || transition instanceof Array) { if (transition instanceof Array) { transition = this._random(transition); } else { transition = this._random(this.transitions); } } if (animation === 'random' || animation instanceof Array) { if (animation instanceof Array) { animation = this._random(animation); } else { animation = this._random(this.animations); } } if (transitionDuration === 'auto' || transitionDuration > delay) { transitionDuration = delay; } if (animationDuration === 'auto') { animationDuration = delay; } $slide = $('
'); if (this.support.transition && transition) { $slide.addClass('vegas-transition-' + transition); } if (this.support.video && videoSettings) { // Video if (videoSettings instanceof Array) { video = this._video(videoSettings); } else { video = this._video(videoSettings.src); } video.loop = videoSettings.loop !== undefined ? videoSettings.loop : true; video.muted = videoSettings.mute !== undefined ? videoSettings.mute : true; if (video.muted === false) { video.volume = 0; this._fadeInSound(video, transitionDuration); } else { video.pause(); } $video = $(video).addClass('vegas-video').css('background-color', color); if (this.support.objectFit) { $video.css('object-position', align + ' ' + valign).css('object-fit', cover).css('width', '100%').css('height', '100%'); } else if (cover === 'contain') { $video.css('width', '100%').css('height', '100%'); } $slide.append($video); } else { // Image img = new Image(); $inner = $('
').css('background-image', 'url("' + src + '")').css('background-color', color).css('background-position', align + ' ' + valign); if (cover === 'repeat') { $inner.css('background-repeat', 'repeat'); } else { $inner.css('background-size', cover); } if (this.support.transition && animation) { $inner.addClass('vegas-animation-' + animation).css('animation-duration', animationDuration + 'ms'); } $slide.append($inner); } if (!this.support.transition) { $slide.css('display', 'none'); } if (total) { $slides.eq(total - 1).after($slide); } else { this.$elmt.prepend($slide); } $slides.css('transition', 'all 0ms').each(function() { this.className = 'vegas-slide'; if (this.tagName === 'VIDEO') { this.className += ' vegas-video'; } if (transition) { this.className += ' vegas-transition-' + transition; this.className += ' vegas-transition-' + transition + '-in'; } }); self._timer(false); function go() { self._timer(true); setTimeout(function() { if (transition) { if (self.support.transition) { $slides.css('transition', 'all ' + transitionDuration + 'ms').addClass('vegas-transition-' + transition + '-out').css('opacity', self.settings.prevTransparent ? 0 : 1); $slides.each(function() { var video = $slides.find('video').get(0); if (video) { video.volume = 1; self._fadeOutSound(video, transitionDuration); } }); $slide.css('transition', 'all ' + transitionDuration + 'ms').addClass('vegas-transition-' + transition + '-in'); } else { $slide.fadeIn(transitionDuration); } } for (var i = 0; i < $slides.length - self.settings.slidesToKeep; i++) { $slides.eq(i).remove(); } self.trigger('walk'); self._slideShow(); }, 100); } if (video) { if (video.readyState === 4) { video.currentTime = 0; } video.play(); go(); } else { img.src = src; if (img.complete) { go(); } else { img.onload = go; } } }, _end: function() { this.ended = !this.settings.autoplay; this._timer(false); this.trigger('end'); }, shuffle: function() { var temp, rand; for (var i = this.total - 1; i > 0; i--) { rand = Math.floor(Math.random() * (i + 1)); temp = this.settings.slides[i]; this.settings.slides[i] = this.settings.slides[rand]; this.settings.slides[rand] = temp; } }, play: function() { if (this.paused) { this.paused = false; this.next(); this.trigger('play'); } }, pause: function() { this._timer(false); this.paused = true; this.trigger('pause'); }, toggle: function() { if (this.paused) { this.play(); } else { this.pause(); } }, playing: function() { return !this.paused && !this.noshow; }, current: function(advanced) { if (advanced) { return { slide: this.slide, data: this.settings.slides[this.slide] }; } return this.slide; }, jump: function(nb) { if (nb < 0 || nb > this.total - 1 || nb === this.slide) { return; } this.trigger('jump'); this.slide = nb; this.trigger('change'); this._goto(this.slide); }, next: function() { this.slide++; this.trigger('next'); this.trigger('change'); if (this.slide >= this.total) { this.slide--; if (!this.settings.loop) { return this._end(); } this.slide = 0; } this._goto(this.slide); }, previous: function() { this.slide--; this.trigger('previous'); this.trigger('change'); if (this.slide < 0) { if (!this.settings.loop) { this.slide++; return; } else { this.slide = this.total - 1; } } this._goto(this.slide); }, trigger: function(fn) { var params = []; if (fn === 'init') { params = [this.settings]; } else { params = [this.slide, this.settings.slides[this.slide]]; } this.$elmt.trigger('vegas' + fn, params); if (typeof this.settings[fn] === 'function') { this.settings[fn].apply(this.$elmt, params); } }, options: function(key, value) { var oldSlides = this.settings.slides.slice(); if (typeof key === 'object') { this.settings = $.extend({}, defaults, $.vegas.defaults, key); } else if (typeof key === 'string') { if (value === undefined) { return this.settings[key]; } this.settings[key] = value; } else { return this.settings; } // In case slides have changed if (this.settings.slides !== oldSlides) { this.total = this.settings.slides.length; this.noshow = this.total < 2; this._preload(); } }, destroy: function() { clearTimeout(this.timeout); this.$elmt.removeClass('vegas-container'); this.$elmt.find('> .vegas-slide').remove(); this.$elmt.find('> .vegas-wrapper').clone(true).children().appendTo(this.$elmt); this.$elmt.find('> .vegas-wrapper').remove(); if (this.settings.timer) { this.$timer.remove(); } if (this.settings.overlay) { this.$overlay.remove(); } this.elmt._vegas = null; } }; $.fn.vegas = function(options) { var args = arguments, error = false, returns; if (options === undefined || typeof options === 'object') { return this.each(function() { if (!this._vegas) { this._vegas = new Vegas(this,options); } }); } else if (typeof options === 'string') { this.each(function() { var instance = this._vegas; if (!instance) { throw new Error('No Vegas applied to this element.'); } if (options[0] === '_' && options[1] === '_'){ returns = instance[options.substring(2)]; } else { if (typeof instance[options] === 'function' && options[0] !== '_') { returns = instance[options].apply(instance, [].slice.call(args, 1)); } else { error = true; } } }); if (error) { throw new Error('No method "' + options + '" in Vegas.'); } return returns !== undefined ? returns : this; } } ; $.vegas = {}; $.vegas.defaults = defaults; $.vegas.isVideoCompatible = function() { return !/(Android|webOS|Phone|iPad|iPod|BlackBerry|Windows Phone)/i.test(navigator.userAgent); } ; } )(window.jQuery || window.Zepto || window.m4q); $(document).ready(function() { if (typeof $.initialize == 'function'){ $.initialize('[type=vegas]', function(event) { if (! window.delegate_vegas){ window.delegate_vegas = true; delegate_function(); } if ($(this).is(':not("[vegas]")')){ $(this).vegas().attr('vegas', ''); } }); } else { window.init_vegas = function(){ $('[type="vegas"]:not("[vegas]")').vegas().attr('vegas', ''); }; if ($('[type="vegas"]:not("[vegas]")').length > 0){ window.init_vegas(); window.delegate_vegas = true; delegate_function(); } } }); function delegate_function(){ $("body").delegate("[type=vegas][vegas]", "mousedown", function() { var e = window.event; startX = e.clientX; window.sliding = true; }); $("body").delegate("[type=vegas][vegas]", "mouseup", function() { var e = window.event; var endX = e.clientX; // 左滑 if ((startX - endX) > 30) { $(this).vegas('next'); } // 右滑 if ((endX - startX) > 30) { $(this).vegas('previous'); } window.sliding = false; }); $("body").delegate("[type=vegas][vegas]", "mouseleave", function() { if (window.sliding) { var e = window.event; var endX = e.clientX; // 左滑 if ((startX - endX) > 30) { $(this).vegas('next'); } // 右滑 if ((endX - startX) > 30) { $(this).vegas('previous'); } window.sliding = false; } }); $("body").delegate('[type=vegas][vegas] .vegas-prev', "click", function() { $(this).parents('[type=vegas]').vegas('previous'); }); $("body").delegate('[type=vegas][vegas] .vegas-next', "click", function() { $(this).parents('[type=vegas]').vegas('next'); }); $("body").delegate('[type=vegas][vegas] .vegas-dots .vegas-dot', "click", function() { $(this).parents('[type=vegas]').vegas('jump', $(this).index()); }); }