基于vue的图片轮换效果-html代码-BFW代码库

代码语言：html
所属分类：幻灯片
代码描述：基于vue的图片轮换效果
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" /><meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"><meta content="yes" name="apple-mobile-web-app-capable"><meta content="black" name="apple-mobile-web-app-status-bar-style"><meta content="telephone=no" name="format-detection"><title>slider</title><style>
        body {
            background: #565f77 none repeat scroll 0 0;
            color: #000;
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
            font-size: 14px;
            margin: 0;
            padding: 0;
            /* position: absolute;        top: 0;        left: 0;        right: 0;        bottom: 0;*/        /*bug:当内容超过一屏时，滚动条需要默认显示*/        overflow-y: scroll;
            width: 100%;
            height: 100%;
            position: absolute;
        }

        h3 {
            font-size: 20px;
            margin: 0;
            margin-top: 25px;
        }

@-webkit-keyframes loading-7 {
            0% {
                margin-bottom: 0
            }

            50% {
                margin-bottom: 20px;
            }

            100% {
                margin-bottom: 0px;
            }
        }

        .loadingDot i {
            display: inline-block;
            margin-left: 5px;
            background: rgb(27, 188, 155);
            width: 12px;
            height: 12px;
            border-radius: 50%;
        }

        .loadingDot i:nth-child(1) {
            -webkit-animation: loading-7 .7s ease-in 0s infinite;
        }

        .loadingDot i:nth-child(2) {
            -webkit-animation: loading-7 .7s ease-in 0.15s infinite;
        }

        .loadingDot i:nth-child(3) {
            -webkit-animation: loading-7 .7s ease-in 0.3s infinite;
        }

        .loadingDot i:nth-child(4) {
            -webkit-animation: loading-7 .7s ease-in 0.45s infinite;
        }

        *,    *:after,    *::before {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            outline: none;
        }

        .main {
            display: flex;
            /*Flex布局*/        display: -webkit-flex;
            /* Safari */        align-items: center;
            /*指定垂直居中*/        justify-content: center;
            /*指定水平居中*/        height: 100%;
        }

        button::-moz-focus-inner,input[type="reset"]::-moz-focus-inner,input[type="button"]::-moz-focus-inner,input[type="submit"]::-moz-focus-inner,input[type="file"] >input[type="button"]::-moz-focus-inner {
            border: none;
        }

:focus {
            outline: 0;
        }
    </style>
</head>
<body>
    <div class="main" ontouchstart="iosScrollBug()">
        <div id="stack"></div>
    </div>
</body>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/vue.2.2.min.js"></script>
<script >
!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define("vue-tantan-stack",[],e):"object"==typeof exports?exports["vue-tantan-stack"]=e():t["vue-tantan-stack"]=e()}(this,function(){return function(t){function e(i){if(a[i])return a[i].exports;var r=a[i]={exports:{},id:i,loaded:!1};return t[i].call(r.exports,r,r.exports,e),r.loaded=!0,r.exports}var a={};return e.m=t,e.c=a,e.p="",e(0)}([function(t,e,a){"use strict";function i(t){return t&&t.__esModule?t:{default:t}}var r=a(1),s=i(r);new Vue(s.default)},function(t,e,a){var i,r,s={};a(2),i=a(6),r=a(13),t.exports=i||{},t.exports.__esModule&&(t.exports=t.exports.default);var o="function"==typeof t.exports?t.exports.options||(t.exports.options={}):t.exports;r&&(o.template=r),o.computed||(o.computed={}),Object.keys(s).forEach(function(t){var e=s[t];o.computed[t]=function(){return e}})},function(t,e,a){var i=a(3);"string"==typeof i&&(i=[[t.id,i,""]]);a(5)(i,{});i.locals&&(t.exports=i.locals)},function(t,e,a){e=t.exports=a(4)(),e.push([t.id,'.stack-wrapper{z-index:1000;width:320px;height:320px;padding:0;list-style:none;pointer-events:none}.controls,.stack-wrapper{margin:0 auto;position:relative}.controls{width:200px;text-align:center;display:-ms-flexbox;display:flex;display:-webkit-flex;-ms-flex-pack:distribute;justify-content:space-around;margin-top:50px}.controls .button{border:none;background:none;cursor:pointer;font-size:16px;width:50px;height:50px;z-index:100;-webkit-tap-highlight-color:rgba(0,0,0,0);border-radius:50%;background:#fff}.button .next,.controls .button{position:relative;display:inline-block}.button .next{width:10px;height:5px;background:#81d47d;line-height:0;font-size:0;vertical-align:middle;-webkit-transform:rotate(45deg);left:-5px;top:2px}.button .next:after{content:"/";display:block;width:20px;height:5px;background:#81d47d;-webkit-transform:rotate(-90deg) translateY(-50%) translateX(50%)}.button .prev{display:inline-block;line-height:0;font-size:0;vertical-align:middle;-webkit-transform:rotate(45deg)}.button .prev,.button .prev:after{width:20px;height:5px;background:#e66868}.button .prev:after{content:"/";display:block;-webkit-transform:rotate(-90deg)}.controls .text-hidden{position:absolute;overflow:hidden;width:0;height:0;color:transparent;display:block}',""])},function(t,e){t.exports=function(){var t=[];return t.toString=function(){for(var t=[],e=0;e<this.length;e++){var a=this[e];a[2]?t.push("@media "+a[2]+"{"+a[1]+"}"):t.push(a[1])}return t.join("")},t.i=function(e,a){"string"==typeof e&&(e=[[null,e,""]]);for(var i={},r=0;r<this.length;r++){var s=this[r][0];"number"==typeof s&&(i[s]=!0)}for(r=0;r<e.length;r++){var o=e[r];"number"==typeof o[0]&&i[o[0]]||(a&&!o[2]?o[2]=a:a&&(o[2]="("+o[2]+") and ("+a+")"),t.push(o))}},t}},function(t,e,a){function i(t,e){for(var a=0;a<t.length;a++){var i=t[a],r=u[i.id];if(r){r.refs++;for(var s=0;s<r.parts.length;s++)r.parts[s](i.parts[s]);for(;s<i.parts.length;s++)r.parts.push(p(i.parts[s],e))}else{for(var o=[],s=0;s<i.parts.length;s++)o.push(p(i.parts[s],e));u[i.id]={id:i.id,refs:1,parts:o}}}}function r(t){for(var e=[],a={},i=0;i<t.length;i++){var r=t[i],s=r[0],o=r[1],n=r[2],p=r[3],c={css:o,media:n,sourceMap:p};a[s]?a[s].parts.push(c):e.push(a[s]={id:s,parts:[c]})}return e}function s(t,e){var a=f(),i=g[g.length-1];if("top"===t.insertAt)i?i.nextSibling?a.insertBefore(e,i.nextSibling):a.appendChild(e):a.insertBefore(e,a.firstChild),g.push(e);else{if("bottom"!==t.insertAt)throw new Error("Invalid value for parameter 'insertAt'. Must be 'top' or 'bottom'.");a.appendChild(e)}}function o(t){t.parentNode.removeChild(t);var e=g.indexOf(t);e>=0&&g.splice(e,1)}function n(t){var e=document.createElement("style");return e.type="text/css",s(t,e),e}function p(t,e){var a,i,r;if(e.singleton){var s=y++;a=m||(m=n(e)),i=c.bind(null,a,s,!1),r=c.bind(null,a,s,!0)}else a=n(e),i=h.bind(null,a),r=function(){o(a)};return i(t),function(e){if(e){if(e.css===t.css&&e.media===t.media&&e.sourceMap===t.sourceMap)return;i(t=e)}else r()}}function c(t,e,a,i){var r=a?"":i.css;if(t.styleSheet)t.styleSheet.cssText=v(e,r);else{var s=document.createTextNode(r),o=t.childNodes;o[e]&&t.removeChild(o[e]),o.length?t.insertBefore(s,o[e]):t.appendChild(s)}}function h(t,e){var a=e.css,i=e.media,r=e.sourceMap;if(i&&t.setAttribute("media",i),r&&(a+="\n/*# sourceURL="+r.sources[0]+" */",a+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(r))))+" */"),t.styleSheet)t.styleSheet.cssText=a;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(a))}}var u={},d=function(t){var e;return function(){return"undefined"==typeof e&&(e=t.apply(this,arguments)),e}},l=d(function(){return/msie [6-9]\b/.test(window.navigator.userAgent.toLowerCase())}),f=d(function(){return document.head||document.getElementsByTagName("head")[0]}),m=null,y=0,g=[];t.exports=function(t,e){e=e||{},"undefined"==typeof e.singleton&&(e.singleton=l()),"undefined"==typeof e.insertAt&&(e.insertAt="bottom");var a=r(t);return i(a,e),function(t){for(var s=[],o=0;o<a.length;o++){var n=a[o],p=u[n.id];p.refs--,s.push(p)}if(t){var c=r(t);i(c,e)}for(var o=0;o<s.length;o++){var p=s[o];if(0===p.refs){for(var h=0;h<p.parts.length;h++)p.parts[h]();delete u[p.id]}}}};var v=function(){var t=[];return function(e,a){return t[e]=a,t.filter(Boolean).join("\n")}}()},function(t,e,a){"use strict";function i(t){return t&&t.__esModule?t:{default:t}}Object.defineProperty(e,"__esModule",{value:!0});var r=a(7),s=i(r);e.default={el:"#stack",data:function(){return{someList:[],stackinit:{visible:3}}},mounted:function(){var t=this;setTimeout(function(){t.someList=[{html:'<img src="http://repo.bfw.wiki/bfwrepo/image/5e584482a56eb.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_400,h_400,/quality,q_90" alt="01">'},{html:'<img src="http://repo.bfw.wiki/bfwrepo/image/5e584482a56eb.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_400,h_400,/quality,q_90" alt="02">'},{html:'<img src="http://repo.bfw.wiki/bfwrepo/image/5e584482a56eb.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_400,h_400,/quality,q_90" alt="03">'},{html:'<img src="http://repo.bfw.wiki/bfwrepo/image/5e584482a56eb.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_400,h_400,/quality,q_90" alt="04">'},{html:'<img src="http://repo.bfw.wiki/bfwrepo/image/5e584482a56eb.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_400,h_400,/quality,q_90" alt="05">'},{html:&#.........完整代码请登录后点击上方下载按钮下载查看