SOURCE

console 命令行工具 X clear

                    
>
console
function slidestalkSlide(conf, direction) {
    if (!conf.sliding) {
        conf.sliding = true;

        var new_index;
        switch (direction) {
            case 'right':
                new_index = conf.index - 1;
                break;
            case 'left':
                new_index = conf.index + 1;
                break;
            case 'first':
                new_index = 0;
                break;
            case 'last':
                new_index = conf.count - 1;
                break;
        }

        if (new_index < 0 || new_index >= conf.count || new_index == conf.index) {
            conf.sliding = false;
            return false;
        } else {
            conf.index = new_index;
            conf.galary.style['marginLeft'] = -1 * new_index * conf.width + conf.unit;
            conf.progressbar.style['width'] = parseInt((conf.index + 1) / conf.count * 100) + '%';
            conf.galary.addEventListener("transitionend", function _listener() {
                conf.galary.removeEventListener('transitionend', _listener, false);
                conf.sliding = false;
                conf.pager.innerText = (conf.index + 1) + '/' + conf.count;
            }, false);
        }
    }
}

function initSlidestalkSlide(container, width, height, unit = 'rem') {
    container.style['width'] = width + unit;
    if (height) container.style['height'] = height + unit;
    var items = container.querySelectorAll('ul>li>img');
    for (var i = 0; i < items.length; i++) {
        items[i].src = items[i].getAttribute('data-src');
        items[i].style['width'] = width + unit;
    }
    var pager = container.querySelector('.slidestalk-slide-toolbar-page');
    var progressbar = container.querySelector('.slidestalk-slide-progress-bar');
    pager.innerText = '1/' + items.length;

    var conf = {
        'width': width,
        'height': height,
        'unit': 'rem',
        'index': 0,
        'sliding': false,
        'container': container,
        'galary': container.querySelector('ul'),
        'pager': pager,
        'progressbar': progressbar,
        'count': items.length
    }

    document.querySelector('.slidestalk-slide-previous-trigger').addEventListener('click', function () {
        slidestalkSlide(conf, 'right');
    }, false);

    document.querySelector('.slidestalk-slide-next-trigger').addEventListener('click', function () {
        slidestalkSlide(conf, 'left');
    }, false);

    document.querySelector('.slidestalk-slide-first-trigger').addEventListener('click', function () {
        slidestalkSlide(conf, 'first');
    }, false);

    document.querySelector('.slidestalk-slide-last-trigger').addEventListener('click', function () {
        slidestalkSlide(conf, 'last');
    }, false);

    document.querySelector('.slidestalk-slide-fullscreen-trigger').addEventListener('click', function () {
        reqFullScreen(container);
    }, false);

    swipe(container, {
        swipeLeft: function () { slidestalkSlide(conf, 'left'); },
        swipeRight: function () { slidestalkSlide(conf, 'right'); },
        swipeDown: function () { },
        swipeUp: function () { },
        drag: function (e) { }
    });
}

initSlidestalkSlide(document.querySelector('div.slidestalk-slide-container'), 50, null);

function swipe(el, options) {
    //设置开关,监听move事件
    var isMove = false;
    // 设置手指触摸开始的坐标
    var startX = 0;
    var startY = 0;
    // 设置手指移动的坐标
    var moveX = 0;
    var moveY = 0;
    //设置指针距离元素的边框的距离
    var disX = 0;
    var disY = 0;
    // 如果用户未传入参数2,自己定义一个
    var data = {
        swipeLeft: function () { },
        swipeRight: function () { },
        swipeDown: function () { },
        swipeUp: function () { },
        drag: function () { }
    }
    // 判断是否传入参数2,有的话覆盖默认值
    Object.assign(data, options);
    // 给元素绑定三个事件
    el.addEventListener('touchstart', function (e) {
        //获取手指开始的坐标
        startX = e.touches[0].pageX;
        startY = e.touches[0].pageY;
        //计算指针距离元素边框的位置
        disX = startX - el.offsetLeft;
        disY = startY - el.offsetTop;
    });
    el.addEventListener('touchmove', function (e) {
        //如果触发了move事件,打开开关
        isMove = true;
        // 获取移动时的坐标
        moveX = e.touches[0].pageX;
        moveY = e.touches[0].pageY;
        e.mation = {
            startX: startX,
            startY: startY,
            moveX: moveX,
            moveY: moveY,
            disX: disX,
            disY: disY
        }
        data.drag.call(el, e);
    });
    el.addEventListener('touchend', function (e) {
        // 判断是否触发了move事件
        if (isMove) {
            // 计算水平边长
            var absX = Math.abs(moveX - startX);
            // 计算垂直边长
            var absY = Math.abs(moveY - startY);
            // 判断垂直还是水平滑动
            if (absX > absY) {
                // console.log('水平滑动');
                //再判断是左滑右滑
                if (moveX - startX > 0) {
                    data.swipeRight.call(el, e);
                } else {
                    data.swipeLeft.call(el, e);
                }
            } else {
                // console.log('垂直滑动');
                //判断是上滑还是下滑
                if (moveY - start > 0) {
                    data.swipeDown.call(el, e);
                } else {
                    data.swipeUp.call(el, e);
                }
            }
        }
        isMove = false;
    });
}

function reqFullScreen(element) {
    var de = element;
    if (de.requestFullscreen) {
        de.requestFullscreen();
    } else if (de.mozRequestFullScreen) {
        de.mozRequestFullScreen();//火狐浏览器的请求全屏
    } else if (de.webkitRequestFullScreen) {
        de.webkitRequestFullScreen();//谷歌、Safari浏览器的请求全屏
    } else if (de.msRequestFullscreen) {
        de.msRequestFullscreen();//IE浏览器的请求全屏
    } else {
        console.log("进入全屏失败")
    }
}


function exitFullscreen() {
    if (document.exitFullscreen) {
        document.exitFullscreen();
    }
    else if (document.msExitFullscreen) {
        document.msExitFullscreen();
    }
    else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
    }
    else if (document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen();
    }
}

!function (e) { var t, c, n, o, i, l, s, d = '<svg><symbol id="icon-quanping" viewBox="0 0 1024 1024"><path d="M329.874286 326.217143c-32.329143 0-58.514286 26.185143-58.514286 58.514286v254.537142c0 32.329143 26.185143 58.514286 58.514286 58.514286h364.251428c32.329143 0 58.514286-26.185143 58.514286-58.514286v-254.537142c0-32.329143-26.185143-58.514286-58.514286-58.514286h-364.251428z"  ></path><path d="M855.332571 573.44c-15.798857 0-28.672 12.873143-28.672 28.672v126.976c0 16.091429-13.165714 29.257143-29.257142 29.257143H658.285714c-15.798857 0-28.672 12.873143-28.672 28.672s12.873143 28.672 28.672 28.672h139.117715c47.835429 0 86.601143-38.912 86.601142-86.601143v-126.976c0-15.798857-12.873143-28.672-28.672-28.672zM168.96 450.56c15.798857 0 28.672-12.873143 28.672-28.672v-126.976c0-16.091429 13.165714-29.257143 29.257143-29.257143h137.947428c15.798857 0 28.672-12.873143 28.672-28.672s-12.873143-28.672-28.672-28.672h-137.947428c-47.835429 0-86.601143 38.912-86.601143 86.601143v126.976c0 15.798857 12.873143 28.672 28.672 28.672zM364.836571 758.345143h-137.947428c-16.091429 0-29.257143-13.165714-29.257143-29.257143v-126.976c0-15.798857-12.873143-28.672-28.672-28.672s-28.672 12.873143-28.672 28.672v126.976c0 47.835429 38.912 86.601143 86.601143 86.601143h137.947428c15.798857 0 28.672-12.873143 28.672-28.672s-12.873143-28.672-28.672-28.672zM657.993143 265.654857h139.117714c16.091429 0 29.257143 13.165714 29.257143 29.257143v126.976c0 15.798857 12.873143 28.672 28.672 28.672s28.672-12.873143 28.672-28.672v-126.976c0-47.689143-38.912-86.601143-86.601143-86.601143h-139.117714c-15.798857 0-28.672 12.873143-28.672 28.672s12.873143 28.672 28.672 28.672z"  ></path></symbol><symbol id="icon-bofangqi_shouyexiayishou_" viewBox="0 0 1024 1024"><path d="M644.333693 495.214742L283.169749 272.95922c-15.283048-9.405188-27.276172-2.45593-27.276173 15.220626v447.640308c0 17.788096 12.212112 24.490738 27.276173 15.220626l361.163944-222.255522c15.283048-9.405188 15.06406-24.300404 0-33.570516zM735.566375 256.173962c-17.784003 0-31.978255 14.329328-31.978255 32.005884v447.640308c0 17.788096 14.317048 32.005884 31.978255 32.005884 17.784003 0 31.978255-14.329328 31.978255-32.005884V288.179846c0-17.787073-14.317048-32.005884-31.978255-32.005884z" fill="" ></path></symbol><symbol id="icon-l" viewBox="0 0 1024 1024"><path d="M379.66630699999996 528.785258L740.8302510000001 751.0407799999998c15.283048000000003 9.405187999999995 27.276172 2.4559299999999915 27.276172999999996-15.220626000000003l-1.4210854715202004e-13-447.640308c-5.329070518200751e-15-17.788096-12.212112000000005-24.490737999999997-27.276173000000004-15.220625999999996l-361.1639439999999 222.25552200000004c-15.283047999999997 9.405188000000004-15.06405999999999 24.300404000000007 1.0658141036401503e-14 33.570516zM288.4336250000002 767.8260379999999c17.784003-5.329070518200751e-15 31.978254999999994-14.329328000000013 31.97825499999999-32.005884l-1.4210854715202004e-13-447.640308c-5.329070518200751e-15-17.788096-14.31704800000001-32.005883999999995-31.978255000000004-32.005883999999995-17.784003 5.329070518200751e-15-31.978254999999994 14.329328000000013-31.97825499999999 32.005884L256.45537 735.820154c3.552713678800501e-15 17.787073 14.31704800000001 32.005883999999995 31.978255000000004 32.005883999999995z" fill="" ></path></symbol><symbol id="icon-kuaijin" viewBox="0 0 1024 1024"><path d="M852.38651212 516.3482685l-301.43179892 223.74386788 0-447.48928069zM550.95316824 516.3482685l-301.43179893 223.74386788 0-447.48928069z"  ></path></symbol><symbol id="icon-kuaitui" viewBox="0 0 1024 1024"><path d="M499.00544 281.35424l-252.90752 218.3168c-7.30112 6.25664-7.30112 18.30912 0 24.56576l252.90752 218.4192c9.4208 8.0896 23.23456 0.78848 23.23456-12.32896v-436.736c0-13.03552-13.824-20.41856-23.23456-12.2368z m281.6 0l-252.90752 218.3168c-3.61472 3.1744-5.45792 7.75168-5.45792 12.32896 0 4.57728 1.8432 9.15456 5.45792 12.31872l252.90752 218.4192c9.4208 8.0896 23.23456 0.78848 23.23456-12.31872V293.5808c0-13.02528-13.824-20.40832-23.23456-12.22656z"  ></path></symbol></svg>', a = (t = document.getElementsByTagName("script"))[t.length - 1].getAttribute("data-injectcss"); if (a && !e.__iconfont__svg__cssinject__) { e.__iconfont__svg__cssinject__ = !0; try { document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>") } catch (e) { console && console.log(e) } } function h() { l || (l = !0, o()) } c = function () { var e, t, c, n, o, i = document.createElement("div"); i.innerHTML = d, d = null, (e = i.getElementsByTagName("svg")[0]) && (e.setAttribute("aria-hidden", "true"), e.style.position = "absolute", e.style.width = 0, e.style.height = 0, e.style.overflow = "hidden", t = e, (c = document.body).firstChild ? (n = t, (o = c.firstChild).parentNode.insertBefore(n, o)) : c.appendChild(t)) }, document.addEventListener ? ~["complete", "loaded", "interactive"].indexOf(document.readyState) ? setTimeout(c, 0) : (n = function () { document.removeEventListener("DOMContentLoaded", n, !1), c() }, document.addEventListener("DOMContentLoaded", n, !1)) : document.attachEvent && (o = c, i = e.document, l = !1, (s = function () { try { i.documentElement.doScroll("left") } catch (e) { return void setTimeout(s, 50) } h() })(), i.onreadystatechange = function () { "complete" == i.readyState && (i.onreadystatechange = null, h()) }) }(window);
<div class="slidestalk-slide-container">
    <ul>
        <li>
            <img src="https://picture.dunphone.com/e9291eaddacd460280a34a151dcc5cc4.gif" data-src="http://picture.benshar.com/wp/wp1.jpg" alt="">
            <span class="slides-title">第一张</span>
        </li>
        <li>
            <img src="https://picture.dunphone.com/e9291eaddacd460280a34a151dcc5cc4.gif" data-src="http://picture.benshar.com/wp/wp2.jpg" alt="">
            <span class="slides-title">第二张</span>
        </li>
        <li>
            <img src="https://picture.dunphone.com/e9291eaddacd460280a34a151dcc5cc4.gif" data-src="http://picture.benshar.com/wp/wp3.jpg" alt="">
            <span class="slides-title">第三张</span>
        </li>
        <li>
            <img src="https://picture.dunphone.com/e9291eaddacd460280a34a151dcc5cc4.gif" data-src="http://picture.benshar.com/wp/wp4.jpg" alt="">
            <span class="slides-title">第四张</span>
        </li>
        <li>
            <img src="https://picture.dunphone.com/e9291eaddacd460280a34a151dcc5cc4.gif" data-src="http://picture.benshar.com/wp/wp5.jpg" alt="">
            <span class="slides-title">第五张</span>
        </li>
        <li>
            <img src="https://picture.dunphone.com/e9291eaddacd460280a34a151dcc5cc4.gif" data-src="http://picture.benshar.com/wp/wp6.jpg" alt="">
            <span class="slides-title">第六张</span>
        </li>
        <li>
            <img src="https://picture.dunphone.com/e9291eaddacd460280a34a151dcc5cc4.gif" data-src="http://picture.benshar.com/wp/wp7.jpg" alt="">
            <span class="slides-title">第七张</span>
        </li>
    </ul>
    <div class="slidestalk-slide-progress-container">
        <div class="slidestalk-slide-progress-bar"></div>
    </div>
    <div class="slidestalk-slide-toolbar-container">
        <svg class="slidestalk-slide-toolbar-icon slidestalk-slide-first-trigger" aria-hidden="true">
            <use xlink:href="#icon-l"></use>
        </svg>
        <svg class="slidestalk-slide-toolbar-icon slidestalk-slide-previous-trigger" aria-hidden="true">
            <use xlink:href="#icon-kuaitui"></use>
        </svg>
        <div class="slidestalk-slide-toolbar-page">1/1</div>
        <svg class="slidestalk-slide-toolbar-icon slidestalk-slide-next-trigger" aria-hidden="true">
            <use xlink:href="#icon-kuaijin"></use>
        </svg>
        <svg class="slidestalk-slide-toolbar-icon slidestalk-slide-last-trigger" aria-hidden="true">
            <use xlink:href="#icon-bofangqi_shouyexiayishou_"></use>
        </svg>
        <svg class="slidestalk-slide-toolbar-icon slidestalk-slide-fullscreen-trigger" aria-hidden="true">
            <use xlink:href="#icon-quanping"></use>
        </svg>
    </div>
</div>

<!-- <button class="slidestalk-slide-first-trigger">First</button>
<button class="slidestalk-slide-previous-trigger">Previous</button>
<button class="slidestalk-slide-next-trigger">Next</button>
<button class="slidestalk-slide-last-trigger">Last</button> -->
html,
body {
    font-size: 10px;
}

div.slidestalk-slide-container {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

div.slidestalk-slide-container:-webkit-full-screen {
    width: 100vw;
    background-color: red;
}
 
div.slidestalk-slide-container:-moz-full-screen {
    /*style for full screen element */
}
 
div.slidestalk-slide-container:-ms-fullscreen {
    /*style for full screen element */
}
 
div.slidestalk-slide-container:fullscreen {
    width: 100vw;
    background-color: red;
}

div.slidestalk-slide-container>ul>li>img:fullscreen {
    width: 100vw;
    height: 100vh;
    background-color: rgb(62, 70, 190);
}

div.slidestalk-slide-container>ul {
    list-style: none;
    padding: 0;
    margin: 0;
    white-space: nowrap;
    margin-left: 0;
    transition: margin-left 1s ease-in-out;
    display: flex;
    align-items: center;
}

div.slidestalk-slide-container>ul>li {
    list-style: none;
    padding: 0;
    margin: 0;
    background-color: #eee;
    display: inline-block;
    position: relative;
}

div.slidestalk-slide-container>ul>li>img {
    width: 100%;
    height: auto;
    padding: 0;
    margin: 0;
}

div.slidestalk-slide-container .slides-title {
    position: absolute;
    z-index: 10;
    display: block;
    font-size: 2rem;
    left: 0rem;
    bottom: 0rem;
    color: #fff;
    font-weight: bold;
    background: rgba(0, 152, 50, 0.7);
    width: 100%;
    text-align: center;
}

.slidestalk-slide-toolbar-container {
    background-color: #888888;
    height: 4rem;
    display: flex;
    justify-items: center;
    justify-content: center;
    align-items: center;
    color: #fff;
    position: relative;
}

.slidestalk-slide-toolbar-icon {
    width: 3em;
    height: 3em;
    fill: currentColor;
    overflow: hidden;
    margin: 0 0.5rem 0 0.5rem;
    cursor:pointer;
}

.slidestalk-slide-toolbar-page{
    font-size: 2rem;
    margin: 0 4rem 0 4rem;
}

.slidestalk-slide-progress-container{
    width: 100%;
    text-align: left;
}

.slidestalk-slide-progress-bar{
    width: 0%;
    height: 0.14rem;
    background-color: #01C9FF;
    transition: width 1s ease-in-out;
}

.slidestalk-slide-fullscreen-trigger{
    position: absolute;
    right:0;
}