9 lines
8.0 KiB
JavaScript
9 lines
8.0 KiB
JavaScript
/*！
|
||
* Vue-slideshow v1.1.0
|
||
*
|
||
* Copyright (C) 2019, ZhaoGang
|
||
* Released under the MIT license
|
||
*
|
||
* Update: 2019-04-20
|
||
*/
|
||
"use strict";!function(t,i,e){function o(i,e){return(e||t).querySelector(i)}function a(i,e){return[].slice.call((e||t).querySelectorAll(i))}o("style.v-slideshow-style")||o("head").insertAdjacentHTML("beforeend",'<style class="v-slideshow-style">.v-slideshow-container{position:relative;width:100%;height:100%;margin:0;padding:0;overflow:hidden;background:#fff}.v-slideshow-wrapper{position:absolute;height:100%;margin:0;padding:0}.v-slideshow-box,.v-slideshow-box a,.v-slideshow-box img{position:absolute;width:100%;height:100%}.v-slideshow-box a,.v-slideshow-box img{display:block;border:0}.v-slideshow-box-fade{opacity:0;transition:.7s;display:none}.v-slideshow-box-show{opacity:1}.v-slideshow-box-block{display:block}.v-slideshow-box.v-slideshow-block{display:block}.v-slideshow-dot{position:absolute;height:10px;bottom:20px;left:50%;transform:translateX(-50%)}.v-slideshow-dot i{display:block;float:left;cursor:pointer;width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.5);margin:0 5px;transition:.3s}.v-slideshow-dot i.active{background:rgba(255,255,255,1)}.v-slideshow-arrow i{display:block;width:40px;height:40px;background-image:url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU1NzI0MjA4NjA5IiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjIyOTAiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjgiIGhlaWdodD0iMjgiPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PC9zdHlsZT48L2RlZnM+PHBhdGggZD0iTTY3MC42NzY5MjkgNzc3LjU5Mjk4NCA0MDMuNjI3NzggNTEzLjM2MjAyMWwyNjUuMzIwNzg1LTI2OC4xNDYxMzNjMTEuNzc2MjA4LTExLjc3NTE4NCAxMS43MzQyNTItMzAuOTA4OTY0LTAuMDkxMDc0LTQyLjczNDI5bC0wLjAwMTAyMyAwYy0xMS44MjUzMjYtMTEuODI2MzUtMzAuOTU4MDgyLTExLjg2NzI4Mi00Mi43MjgxNSAyLjkzMDc0OUwzNDMuMTAwMjQyIDQ4OC40NDA0MjFjLTMuODE3OTU1IDQuMjczMzI3LTguMjA1ODkyIDkuMzIxMjk2LTguOTMzNDYzIDEyLjA0NTMzNy00LjQ3MDgyNSAxMS4xMTIwODItMi4yMzI4NTQgMjQuNzY1MDMzIDYuNzEwODQyIDM1Ljk4NzYzMmwyODYuOTgyMTMgMjg2Ljk4MjEzYzExLjg3NTQ2OCA4Ljg0NzUwNSAzMS4wOTYyMjkgOC44OTM1NTQgNDIuOTIyNTc4LTIuOTMyNzk2QzY4Mi42MDY2MzMgODA4LjY5NjM3NiA2ODIuNTYwNTg0IDc4OS40NzY2MzkgNjcwLjY3NjkyOSA3NzcuNTkyOTg0eiIgcC1pZD0iMjI5MSIgZmlsbD0iI2ZmZmZmZiI+PC9wYXRoPjwvc3ZnPg==");background-color:rgba(0,0,0,.5);background-position:center;background-repeat:no-repeat;position:absolute;top:50%;border-radius:50%;cursor:pointer;transform:translateY(-50%)}.v-slideshow-arrow i:first-child{left:15px}.v-slideshow-arrow i:last-child{right:15px;transform:translateY(-50%) rotate(180deg)}</style>\n\t\t'),e.component("vue-slideshow",{template:'\n\t\t\t<div \n\t\t\t\tclass="v-slideshow-container" \n\t\t\t\t:data-custom-arrow="Array.isArray( config.arrow ) && config.arrow.join( \'|\' )" \n\t\t\t\t:data-custom-dot="typeof config.dot === \'string\' && config.dot" \n\t\t\t\t:data-id="\'v-slideshow-id-\' + Date.now() + ~~(Math.random() * 100000000)"\n\t\t\t\t@mouseenter="enter" \n\t\t\t\t@mouseleave="leave"\n\t\t\t>\n\t\t\t\t<div class="v-slideshow-wrapper" :style="wrapperStyle">\n\t\t\t\t\t<div class="v-slideshow-box" v-if="config.effect === \'slide\'" :style="boxStyle( 0 )">\n\t\t\t\t\t\t<a :href="data[ data.length - 1 ].href"><img :src="data[ data.length - 1 ].src"></a>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div v-for="( list, index ) in data" :class="boxClass( index )" :style="boxStyle( index + 1 )">\n\t\t\t\t\t\t<a :href="list.href"><img :src="list.src"></a>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class="v-slideshow-box" v-if="config.effect === \'slide\'" :style="boxStyle( data.length + 1 )">\n\t\t\t\t\t\t<a :href="data[ 0 ].href"><img :src="data[ 0 ].src"></a>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t<div class="v-slideshow-arrow" v-if="config.arrow !== false && !Array.isArray( config.arrow )">\n\t\t\t\t\t<i @click="arrowEvent( 0 )"></i>\n\t\t\t\t\t<i @click="arrowEvent( 1 )"></i>\n\t\t\t\t</div>\n\t\t\t\t<div class="v-slideshow-dot" v-if="config.dot !== false && typeof config.dot !== \'string\'">\n\t\t\t\t\t<i v-for="( n, index ) in data" v-if="index < data.length" :class="dotIClass( index )" @click="dotEvent( index )"></i>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t',props:["data","config"],computed:{wrapperStyle:function(){return{width:"slide"===this.config.effect?100*(this.data.length+2)+"%":"100%",transform:"slide"===this.config.effect&&"translateX(-"+100/(this.data.length+2)+"%)"}},boxClass:function(){return function(t){return{"v-slideshow-box":!0,"v-slideshow-box-fade":"fade"===this.config.effect&&!0,"v-slideshow-box-show":"fade"===this.config.effect&&0===t,"v-slideshow-box-block":"fade"===this.config.effect&&0===t}}},boxStyle:function(){return function(t){return{width:("slide"!==this.config.effect?100:100/(this.data.length+2))+"%",left:"slide"===this.config.effect&&100/(this.data.length+2)*t+"%"}}},dotIClass:function(){return function(t){return{active:0===t}}}},methods:{slide:function(t){var e=i.VueSlideShowIDCache[this.$el.getAttribute("data-id")];e.animated=!0;var o=100/(this.data.length+2),a=this.data.length;this.dotChange(t,this.config.dot),-1===t&&this.dotChange(a-1,this.config.dot),t===a&&this.dotChange(0,this.config.dot);var s=this.$el.querySelector(".v-slideshow-wrapper");s.style.transition=".7s",requestAnimationFrame(function(){s.style.transform="translateX(-"+o*(t+1)+"%)"});var n=i.setTimeout(function(){s.style.transition="0s",t===a&&(e.imageIndex=0,s.style.transform="translateX(-"+o+"%)"),-1===t&&(e.imageIndex=a-1,s.style.transform="translateX(-"+o*a+"%)"),i.clearTimeout(n),e.animated=!1},700)},fade:function(t){var e=i.VueSlideShowIDCache[this.$el.getAttribute("data-id")];e.animated=!0,this.dotChange(t,this.config.dot),a(".v-slideshow-box",this.$el).forEach(function(o,a){if(a===t){o.classList.add("v-slideshow-box-block");var s=i.setTimeout(function(){o.classList.add("v-slideshow-box-show"),i.clearTimeout(s)},16)}else{o.classList.remove("v-slideshow-box-show");var n=i.setTimeout(function(){o.classList.remove("v-slideshow-box-block"),i.clearTimeout(n),e.animated=!1},700)}})},dotChange:function(t,e){i.VueSlideShowIDCache[this.$el.getAttribute("data-id")].imageIndex=t,("string"==typeof e?[].slice.call(o(e).children):a(".v-slideshow-dot i",this.$el)).forEach(function(i,e){i.classList.remove("active"),e===t&&i.classList.add("active")})},dotEvent:function(t,e){i.VueSlideShowIDCache[this.$el.getAttribute("data-id")].animated||(this["fade"===this.config.effect?"fade":"slide"](t),this.dotChange(t,e))},arrowEvent:function(t){if(!i.VueSlideShowIDCache[this.$el.getAttribute("data-id")].animated){var e=i.VueSlideShowIDCache[this.$el.getAttribute("data-id")];t?++e.imageIndex>this.data.length-1&&"slide"!==this.config.effect&&(e.imageIndex=0):--e.imageIndex<0&&"slide"!==this.config.effect&&(e.imageIndex=this.data.length-1),"fade"===this.config.effect?this.fade(e.imageIndex):this.slide(e.imageIndex)}},enter:function(){this.config.autoplay&&i.clearInterval(i.VueSlideShowIDCache[this.$el.getAttribute("data-id")].autoTimer)},leave:function(){this.config.autoplay&&this.play()},play:function(){var t=this;i.VueSlideShowIDCache[this.$el.getAttribute("data-id")].autoTimer=i.setInterval(function(){t.arrowEvent(1)},~~this.config.autoplay)}},mounted:function(){var t=this;i.VueSlideShowIDCache||(i.VueSlideShowIDCache={}),i.VueSlideShowIDCache[this.$el.getAttribute("data-id")]={imageIndex:0,animated:!1,autoTimer:null},this.config.autoplay&&this.play();var e=this.$el.getAttribute("data-custom-arrow");e&&(e=e.split("|"),o(e[0]).onclick=function(){return t.arrowEvent(0)},o(e[1]).onclick=function(){return t.arrowEvent(1)});var a=this.$el.getAttribute("data-custom-dot");a&&[].slice.call(o(a).children).forEach(function(i,e){e>t.data.length-1||(i.onclick=function(){return t.dotEvent(e,t.config.dot)})})}}),e.prototype.VueSlideShow=function(t,i){return o(t).innerHTML='<vue-slideshow :data="images" :config="config"></vue-slideshow>',new e({el:t,data:{images:i.images,config:i.config}})}}(document,window,Vue); |