{"version":3,"sources":["webpack:///src/components/Slider.vue","webpack:///./src/components/Slider.vue?9ce4","webpack:///./src/components/Slider.vue","webpack:///./src/slideConfig.js","webpack:///src/App.vue","webpack:///./src/App.vue?7da4","webpack:///./src/App.vue","webpack:///./src/main.js"],"names":["Slider","length","Array","i","nowIndex","this","resetIndex","_this","nowIndexIncrease","slideInterval","start","stop","components_Slider","render","_vm","_h","$createElement","_c","_self","attrs","id","on","mouseover","mouseout","staticClass","style","slideConfig","_v","_l","v","key","class","slideClass","staticRenderFns","prefix","src_slideConfig","src","title","desc","App","__webpack_require__","normalizeComponent","ssrContext","selectortype_template_index_0_src_App","src_App","App_normalizeComponent","vue_esm","config","productionTip","el","components","template"],"mappings":"+JAYAA,QAEA,8CAGA,cACA,+BAEAC,kCAMAC,uFAIAC,qCAGAC,qBAEAC,KAAAC,WAAAF,GACA,oBAAAC,KAAAC,WAAAF,EAAA,GACA,6BAAAC,KAAAC,WAAAF,EAAA,GACA,8BAAAC,KAAAC,WAAAF,EAAA,GAEA,iDAEA,+GAGA,8FAGA,oBAEA,IAAAG,EAAAF,iDAGAG,oBACA,yCAGAC,kCACA,+BAIAC,mCAGAC,SC9DAC,GADiBC,OAFjB,WAA0B,IAAAC,EAAAT,KAAaU,EAAAD,EAAAE,eAA0BC,EAAAH,EAAAI,MAAAD,IAAAF,EAAwB,OAAAE,EAAA,OAAiBE,OAAOC,GAAA,kBAAsBC,IAAKC,UAAAR,EAAAH,KAAAY,SAAAT,EAAAJ,SAA2CO,EAAA,OAAYO,YAAA,aAAAC,MAAA,mBAAAX,EAAAY,YAAAZ,EAAAV,UAAA,UAAkGU,EAAAa,GAAA,KAAAV,EAAA,OAAwBO,YAAA,eAA0BV,EAAAc,GAAAd,EAAA,qBAAAe,EAAA1B,GAAwC,OAAAc,EAAA,OAAiBa,IAAA3B,EAAAqB,YAAA,mBAAAO,MAAAjB,EAAAkB,WAAA7B,GAAAsB,MAAA,mBAAAI,EAAA,wCAE/XI,oBCCjB,ICHMC,EAAS,WA0BfC,IAxBEC,IAAKF,EAAS,SACdG,MAAO,KACPC,KAAM,QAENF,IAAKF,EAAS,SACdG,MAAO,KACPC,KAAM,QAENF,IAAKF,EAAS,SACdG,MAAO,KACPC,KAAM,QAENF,IAAKF,EAAS,SACdG,MAAO,KACPC,KAAM,QAENF,IAAKF,EAAS,SACdG,MAAO,KACPC,KAAM,QAENF,IAAKF,EAAS,SACdG,MAAO,KACPC,KAAM,QCbRC,QAEA,6BAIAb,YAAAS,gBAIAnC,OFlBAwC,EAAA,OAcAC,CACAzC,EACAY,GATA,EAVA,SAAA8B,GACAF,EAAA,SAaA,KAEA,MAUA,UGvBAG,GADiB9B,OAFjB,WAA0B,IAAaE,EAAbV,KAAaW,eAA0BC,EAAvCZ,KAAuCa,MAAAD,IAAAF,EAAwB,OAAAE,EAAA,OAAiBE,OAAOC,GAAA,SAAYH,EAAA,UAAeE,OAAOO,YAAzHrB,KAAyHqB,gBAA+B,IAEjKO,oBCCjB,IAuBAW,EAvBAJ,EAAA,OAcAK,CACAN,EACAI,GATA,EAVA,SAAAD,GACAF,EAAA,SAaA,KAEA,MAUA,QCrBAM,EAAA,EAAIC,OAAOC,eAAgB,EAG3B,IAAIF,EAAA,GACFG,GAAI,OACJC,YAAcX,IAAAK,GACdO,SAAU","file":"static/js/app.b712a613660f0c97050d.js","sourcesContent":["<template>\r\n<div id=\"slider-wrapper\" @mouseover=\"stop\" @mouseout=\"start\">\r\n    <!-- 轮播图1，mainSlide -->\r\n    <div class=\"main-slide\" :style=\"`background: url(${slideConfig[nowIndex].src})`\"></div>\r\n    <!-- 轮播图2，extraSlide -->\r\n    <div class=\"extra-slide\">\r\n        <div class=\"extra-slide-item\" :class=\"slideClass(i)\" v-for=\"(v, i) in slideConfig\" :key=\"i\" :style=\"`background: url(${v.src}); background-size: cover`\"></div>\r\n    </div>\r\n</div>\r\n</template>\r\n\r\n<script>\r\nexport default {\r\n    name: 'slider',\r\n    data: function() {\r\n        return {\r\n            slideInterval: null,\r\n            nowIndex: 0,\r\n            slideLength: this.slideConfig.length\r\n        }\r\n    },\r\n    props: {\r\n        slideConfig: {\r\n            type: Array\r\n        }\r\n    },\r\n    methods: {\r\n        // 限制index不能超出图片列表长度\r\n        resetIndex(i) {\r\n            return i > this.slideLength - 1 ? i - this.slideLength : i\r\n        },\r\n        slideClass(i) {\r\n            let nowIndex = this.nowIndex\r\n            // Map就是key也可以是非字符串的对象，不用Map多写几个 if else 也可以\r\n            let map = new Map([\r\n                [this.resetIndex(nowIndex), 'extra-slide-top'],\r\n                [this.resetIndex(nowIndex + 1), 'extra-slide-middle-first'],\r\n                [this.resetIndex(nowIndex + 2), 'extra-slide-middle-second'],\r\n                [this.resetIndex(nowIndex + 3), 'extra-slide-bottom']\r\n            ])\r\n            // 图片的class根据nowIndex的变化而变化\r\n            return map.get(i) ? map.get(i) : 'extra-slide-hide'\r\n        },\r\n        nowIndexIncrease() {\r\n            this.nowIndex = this.nowIndex > this.slideLength - 2 ? 0 : this.nowIndex + 1\r\n        },\r\n        nowIndexDecrease() {\r\n            this.nowIndex = this.nowIndex < 1 ? this.slideLength - 1 : this.nowIndex - 1\r\n        },\r\n        start() {\r\n            // 定时改变nowIndex\r\n            this.slideInterval = setInterval(() => {\r\n                this.nowIndexIncrease()\r\n            }, 2000)\r\n        },\r\n        stop() {\r\n            clearInterval(this.slideInterval)\r\n            this.slideInterval = null\r\n        }\r\n    },\r\n    mounted() {\r\n        this.start()\r\n    },\r\n    destroyed() {\r\n        this.stop()\r\n    }\r\n}\r\n</script>\r\n\r\n<style lang=\"less\">\r\n@width: 800px; // 容器宽度\r\n@height: 300px; // 容器高度\r\n@bWidth: 500px; // 大图片宽度\r\n@sWidth: @width - @bWidth; // 小图片宽度\r\n@sHeight: @height / 2; // 小图片高度\r\n#slider-wrapper {\r\n    width: @width;\r\n    height: @height;\r\n    margin: 0 auto;\r\n    cursor: pointer;\r\n    background: #ddd;\r\n    border-radius: 5px;\r\n    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.117647), 0 1px 4px rgba(0, 0, 0, 0.117647);\r\n    display: flex;\r\n    overflow: hidden;\r\n    div {\r\n        display: inline-block;\r\n    }\r\n}\r\n\r\n.main-slide {\r\n    width: @bWidth;\r\n    height: @height;\r\n    float: left;\r\n    transition: all .4s ease;\r\n}\r\n\r\n.extra-slide {\r\n    width: @sWidth;\r\n    position: relative;\r\n    .extra-slide-item {\r\n        position: absolute;\r\n        width: @sWidth;\r\n        height: @sHeight;\r\n        left: 0;\r\n        transition: .4s ease-out;\r\n    }\r\n    .extra-slide-top {\r\n        top: -@sHeight;\r\n    }\r\n    .extra-slide-middle-first {\r\n        top: 0;\r\n        z-index: 2\r\n    }\r\n    .extra-slide-middle-second {\r\n        top: @sHeight;\r\n        z-index: 2\r\n    }\r\n    .extra-slide-bottom {\r\n        top: @height\r\n    }\r\n    .extra-slide-hide {\r\n        display: none!important;\r\n    }\r\n}\r\n</style>\n\n\n// WEBPACK FOOTER //\n// src/components/Slider.vue","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{attrs:{\"id\":\"slider-wrapper\"},on:{\"mouseover\":_vm.stop,\"mouseout\":_vm.start}},[_c('div',{staticClass:\"main-slide\",style:((\"background: url(\" + (_vm.slideConfig[_vm.nowIndex].src) + \")\"))}),_vm._v(\" \"),_c('div',{staticClass:\"extra-slide\"},_vm._l((_vm.slideConfig),function(v,i){return _c('div',{key:i,staticClass:\"extra-slide-item\",class:_vm.slideClass(i),style:((\"background: url(\" + (v.src) + \"); background-size: cover\"))})}))])}\nvar staticRenderFns = []\nvar esExports = { render: render, staticRenderFns: staticRenderFns }\nexport default esExports\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/vue-loader/lib/template-compiler?{\"id\":\"data-v-1af37188\",\"hasScoped\":false,\"transformToRequire\":{\"video\":[\"src\",\"poster\"],\"source\":\"src\",\"img\":\"src\",\"image\":\"xlink:href\"},\"buble\":{\"transforms\":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./src/components/Slider.vue\n// module id = null\n// module chunks = ","function injectStyle (ssrContext) {\n  require(\"!!../../node_modules/extract-text-webpack-plugin/dist/loader.js?{\\\"omit\\\":1,\\\"remove\\\":true}!vue-style-loader!css-loader?{\\\"sourceMap\\\":true}!../../node_modules/vue-loader/lib/style-compiler/index?{\\\"vue\\\":true,\\\"id\\\":\\\"data-v-1af37188\\\",\\\"scoped\\\":false,\\\"hasInlineConfig\\\":false}!less-loader?{\\\"sourceMap\\\":true}!../../node_modules/vue-loader/lib/selector?type=styles&index=0!./Slider.vue\")\n}\nvar normalizeComponent = require(\"!../../node_modules/vue-loader/lib/component-normalizer\")\n/* script */\nexport * from \"!!babel-loader!../../node_modules/vue-loader/lib/selector?type=script&index=0!./Slider.vue\"\nimport __vue_script__ from \"!!babel-loader!../../node_modules/vue-loader/lib/selector?type=script&index=0!./Slider.vue\"\n/* template */\nimport __vue_template__ from \"!!../../node_modules/vue-loader/lib/template-compiler/index?{\\\"id\\\":\\\"data-v-1af37188\\\",\\\"hasScoped\\\":false,\\\"transformToRequire\\\":{\\\"video\\\":[\\\"src\\\",\\\"poster\\\"],\\\"source\\\":\\\"src\\\",\\\"img\\\":\\\"src\\\",\\\"image\\\":\\\"xlink:href\\\"},\\\"buble\\\":{\\\"transforms\\\":{}}}!../../node_modules/vue-loader/lib/selector?type=template&index=0!./Slider.vue\"\n/* template functional */\nvar __vue_template_functional__ = false\n/* styles */\nvar __vue_styles__ = injectStyle\n/* scopeId */\nvar __vue_scopeId__ = null\n/* moduleIdentifier (server only) */\nvar __vue_module_identifier__ = null\nvar Component = normalizeComponent(\n  __vue_script__,\n  __vue_template__,\n  __vue_template_functional__,\n  __vue_styles__,\n  __vue_scopeId__,\n  __vue_module_identifier__\n)\n\nexport default Component.exports\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/components/Slider.vue\n// module id = null\n// module chunks = ","const prefix = '/static/'\r\nconst slideConfig = [{\r\n  src: prefix + 's1.jpg',\r\n  title: '图1',\r\n  desc: '说明1'\r\n}, {\r\n  src: prefix + 's2.jpg',\r\n  title: '图2',\r\n  desc: '说明2'\r\n}, {\r\n  src: prefix + 's3.jpg',\r\n  title: '图3',\r\n  desc: '说明3'\r\n}, {\r\n  src: prefix + 's4.jpg',\r\n  title: '图4',\r\n  desc: '说明4'\r\n}, {\r\n  src: prefix + 's5.jpg',\r\n  title: '图5',\r\n  desc: '说明5'\r\n}, {\r\n  src: prefix + 's6.jpg',\r\n  title: '图6',\r\n  desc: '说明6'\r\n}]\r\nexport default slideConfig\n\n\n// WEBPACK FOOTER //\n// ./src/slideConfig.js","<template>\n<div id=\"app\">\n    <Slider :slideConfig=\"slideConfig\"/>\n</div>\n</template>\n\n<script>\nimport Slider from './components/Slider'\n\nimport slideConfig from './slideConfig'\n\nexport default {\n    name: 'App',\n    data() {\n        return {\n            slideConfig\n        }\n    },\n    components: {\n        Slider\n    }\n}\n</script>\n\n<style>\nhtml, body{\n\theight: 100%;\n\twidth: 100%;\n\toverflow: hidden;\n}\n\t#app {\n\t  font-family: \"Avenir\", Helvetica, Arial, sans-serif;\n\t  -webkit-font-smoothing: antialiased;\n\t  -moz-osx-font-smoothing: grayscale;\n\t  text-align: center;\n\t  color: #2c3e50;\n\t  margin-top: 200px;\n\t}\n</style>\n\n\n\n// WEBPACK FOOTER //\n// src/App.vue","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{attrs:{\"id\":\"app\"}},[_c('Slider',{attrs:{\"slideConfig\":_vm.slideConfig}})],1)}\nvar staticRenderFns = []\nvar esExports = { render: render, staticRenderFns: staticRenderFns }\nexport default esExports\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/vue-loader/lib/template-compiler?{\"id\":\"data-v-2d1ca822\",\"hasScoped\":false,\"transformToRequire\":{\"video\":[\"src\",\"poster\"],\"source\":\"src\",\"img\":\"src\",\"image\":\"xlink:href\"},\"buble\":{\"transforms\":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./src/App.vue\n// module id = null\n// module chunks = ","function injectStyle (ssrContext) {\n  require(\"!!../node_modules/extract-text-webpack-plugin/dist/loader.js?{\\\"omit\\\":1,\\\"remove\\\":true}!vue-style-loader!css-loader?{\\\"sourceMap\\\":true}!../node_modules/vue-loader/lib/style-compiler/index?{\\\"vue\\\":true,\\\"id\\\":\\\"data-v-2d1ca822\\\",\\\"scoped\\\":false,\\\"hasInlineConfig\\\":false}!../node_modules/vue-loader/lib/selector?type=styles&index=0!./App.vue\")\n}\nvar normalizeComponent = require(\"!../node_modules/vue-loader/lib/component-normalizer\")\n/* script */\nexport * from \"!!babel-loader!../node_modules/vue-loader/lib/selector?type=script&index=0!./App.vue\"\nimport __vue_script__ from \"!!babel-loader!../node_modules/vue-loader/lib/selector?type=script&index=0!./App.vue\"\n/* template */\nimport __vue_template__ from \"!!../node_modules/vue-loader/lib/template-compiler/index?{\\\"id\\\":\\\"data-v-2d1ca822\\\",\\\"hasScoped\\\":false,\\\"transformToRequire\\\":{\\\"video\\\":[\\\"src\\\",\\\"poster\\\"],\\\"source\\\":\\\"src\\\",\\\"img\\\":\\\"src\\\",\\\"image\\\":\\\"xlink:href\\\"},\\\"buble\\\":{\\\"transforms\\\":{}}}!../node_modules/vue-loader/lib/selector?type=template&index=0!./App.vue\"\n/* template functional */\nvar __vue_template_functional__ = false\n/* styles */\nvar __vue_styles__ = injectStyle\n/* scopeId */\nvar __vue_scopeId__ = null\n/* moduleIdentifier (server only) */\nvar __vue_module_identifier__ = null\nvar Component = normalizeComponent(\n  __vue_script__,\n  __vue_template__,\n  __vue_template_functional__,\n  __vue_styles__,\n  __vue_scopeId__,\n  __vue_module_identifier__\n)\n\nexport default Component.exports\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/App.vue\n// module id = null\n// module chunks = ","// The Vue build version to load with the `import` command\n// (runtime-only or standalone) has been set in webpack.base.conf with an alias.\nimport Vue from 'vue'\nimport App from './App'\n\nVue.config.productionTip = false\n\n/* eslint-disable no-new */\nnew Vue({\n  el: '#app',\n  components: { App },\n  template: '<App/>'\n})\n\n\n\n// WEBPACK FOOTER //\n// ./src/main.js"],"sourceRoot":""}