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) {
var isMove = false;
var startX = 0;
var startY = 0;
var moveX = 0;
var moveY = 0;
var disX = 0;
var disY = 0;
var data = {
swipeLeft: function () { },
swipeRight: function () { },
swipeDown: function () { },
swipeUp: function () { },
drag: function () { }
}
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) {
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) {
if (isMove) {
var absX = Math.abs(moveX - startX);
var absY = Math.abs(moveY - startY);
if (absX > absY) {
if (moveX - startX > 0) {
data.swipeRight.call(el, e);
} else {
data.swipeLeft.call(el, e);
}
} else {
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();
} else if (de.msRequestFullscreen) {
de.msRequestFullscreen();
} 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>
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 {
}
div.slidestalk-slide-container:-ms-fullscreen {
}
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;
}