html设置幻灯片铺满全屏
Fullscreen Javascript Slide navigation
全屏Javascript幻灯片导航
Today – new pure javascript tutorial-demonstration. Result page will contain 16 slides (pages). Four in each row, four columns, plus we will add animated navigation to them through css3 arrows (at sides of screen). Plus, we will have mini-navigation bar for better navigation.
今天-新的纯JavaScript教程演示。 结果页面将包含16张幻灯片(页面)。 每行四列，四列，另外我们还将通过css3箭头(在屏幕的两侧)向它们添加动画导航。 另外，我们将提供迷你导航栏，以实现更好的导航。
现场演示
打包下载
Ok, download the example files and lets start coding !
好的，下载示例文件并开始编码！
步骤1. HTML标记 (Step 1. HTML markup)
In our markup you can see 16 ‘pages’ and mini-navigation for our slides. Here it is.
在我们的标记中，您可以看到16个“页面”和幻灯片的迷你导航。 这里是。
index.html (index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Fullscreen Javascript Slide navigation | Script Tutorials</title>
<link href="css/layout.css" type="text/css" rel="stylesheet">
<script src="js/main.js"></script>
</head>
<body>
<div class="container" id="container">
<div id="pages">
<div id="page1">
<a href="#page2" class="go right"></a>
<a href="#page5" class="go bottom"></a>
</div>
<div id="page2">
<a href="#page1" class="go left"></a>
<a href="#page3" class="go right"></a>
<a href="#page6" class="go bottom"></a>
</div>
<div id="page3">
<a href="#page2" class="go left"></a>
<a href="#page4" class="go right"></a>
<a href="#page7" class="go bottom"></a>
</div>
<div id="page4">
<a href="#page3" class="go left"></a>
<a href="#page8" class="go bottom"></a>
</div>
<div id="page5">
<a href="#page1" class="go top"></a>
<a href="#page6" class="go right"></a>
<a href="#page9" class="go bottom"></a>
</div>
<div id="page6">
<a href="#page5" class="go left"></a>
<a href="#page2" class="go top"></a>
<a href="#page7" class="go right"></a>
<a href="#page10" class="go bottom"></a>
</div>
<div id="page7">
<a href="#page6" class="go left"></a>
<a href="#page3" class="go top"></a>
<a href="#page8" class="go right"></a>
<a href="#page11" class="go bottom"></a>
</div>
<div id="page8">
<a href="#page7" class="go left"></a>
<a href="#page4" class="go top"></a>
<a href="#page12" class="go bottom"></a>
</div>
<div id="page9">
<a href="#page5" class="go top"></a>
<a href="#page10" class="go right"></a>
<a href="#page13" class="go bottom"></a>
</div>
<div id="page10">
<a href="#page9" class="go left"></a>
<a href="#page6" class="go top"></a>
<a href="#page11" class="go right"></a>
<a href="#page14" class="go bottom"></a>
</div>
<div id="page11">
<a href="#page10" class="go left"></a>
<a href="#page7" class="go top"></a>
<a href="#page12" class="go right"></a>
<a href="#page15" class="go bottom"></a>
</div>
<div id="page12">
<a href="#page11" class="go left"></a>
<a href="#page8" class="go top"></a>
<a href="#page16" class="go bottom"></a>
</div>
<div id="page13">
<a href="#page9" class="go top"></a>
<a href="#page14" class="go right"></a>
</div>
<div id="page14">
<a href="#page13" class="go left"></a>
<a href="#page10" class="go top"></a>
<a href="#page15" class="go right"></a>
</div>
<div id="page15">
<a href="#page14" class="go left"></a>
<a href="#page11" class="go top"></a>
<a href="#page16" class="go right"></a>
</div>
<div id="page16">
<a href="#page15" class="go left"></a>
<a href="#page12" class="go top"></a>
</div>
</div>
<div id="nav">
<div>Fullscreen Javascript Slide navigation</div>
<div style="width:130px">
<a href="#page1" class="go"></a>
<a href="#page2" class="go"></a>
<a href="#page3" class="go"></a>
<a href="#page4" class="go"></a>
<a href="#page5" class="go"></a>
<a href="#page6" class="go"></a>
<a href="#page7" class="go"></a>
<a href="#page8" class="go"></a>
<a href="#page9" class="go"></a>
<a href="#page10" class="go"></a>
<a href="#page11" class="go"></a>
<a href="#page12" class="go"></a>
<a href="#page13" class="go"></a>
<a href="#page14" class="go"></a>
<a href="#page15" class="go"></a>
<a href="#page16" class="go"></a>
</div>
<div><a href="https://www.script-tutorials.com/fullscreen-javascript-slide-navigation/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a></div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Fullscreen Javascript Slide navigation | Script Tutorials</title>
<link href="css/layout.css" type="text/css" rel="stylesheet">
<script src="js/main.js"></script>
</head>
<body>
<div class="container" id="container">
<div id="pages">
<div id="page1">
<a href="#page2" class="go right"></a>
<a href="#page5" class="go bottom"></a>
</div>
<div id="page2">
<a href="#page1" class="go left"></a>
<a href="#page3" class="go right"></a>
<a href="#page6" class="go bottom"></a>
</div>
<div id="page3">
<a href="#page2" class="go left"></a>
<a href="#page4" class="go right"></a>
<a href="#page7" class="go bottom"></a>
</div>
<div id="page4">
<a href="#page3" class="go left"></a>
<a href="#page8" class="go bottom"></a>
</div>
<div id="page5">
<a href="#page1" class="go top"></a>
<a href="#page6" class="go right"></a>
<a href="#page9" class="go bottom"></a>
</div>
<div id="page6">
<a href="#page5" class="go left"></a>
<a href="#page2" class="go top"></a>
<a href="#page7" class="go right"></a>
<a href="#page10" class="go bottom"></a>
</div>
<div id="page7">
<a href="#page6" class="go left"></a>
<a href="#page3" class="go top"></a>
<a href="#page8" class="go right"></a>
<a href="#page11" class="go bottom"></a>
</div>
<div id="page8">
<a href="#page7" class="go left"></a>
<a href="#page4" class="go top"></a>
<a href="#page12" class="go bottom"></a>
</div>
<div id="page9">
<a href="#page5" class="go top"></a>
<a href="#page10" class="go right"></a>
<a href="#page13" class="go bottom"></a>
</div>
<div id="page10">
<a href="#page9" class="go left"></a>
<a href="#page6" class="go top"></a>
<a href="#page11" class="go right"></a>
<a href="#page14" class="go bottom"></a>
</div>
<div id="page11">
<a href="#page10" class="go left"></a>
<a href="#page7" class="go top"></a>
<a href="#page12" class="go right"></a>
<a href="#page15" class="go bottom"></a>
</div>
<div id="page12">
<a href="#page11" class="go left"></a>
<a href="#page8" class="go top"></a>
<a href="#page16" class="go bottom"></a>
</div>
<div id="page13">
<a href="#page9" class="go top"></a>
<a href="#page14" class="go right"></a>
</div>
<div id="page14">
<a href="#page13" class="go left"></a>
<a href="#page10" class="go top"></a>
<a href="#page15" class="go right"></a>
</div>
<div id="page15">
<a href="#page14" class="go left"></a>
<a href="#page11" class="go top"></a>
<a href="#page16" class="go right"></a>
</div>
<div id="page16">
<a href="#page15" class="go left"></a>
<a href="#page12" class="go top"></a>
</div>
</div>
<div id="nav">
<div>Fullscreen Javascript Slide navigation</div>
<div style="width:130px">
<a href="#page1" class="go"></a>
<a href="#page2" class="go"></a>
<a href="#page3" class="go"></a>
<a href="#page4" class="go"></a>
<a href="#page5" class="go"></a>
<a href="#page6" class="go"></a>
<a href="#page7" class="go"></a>
<a href="#page8" class="go"></a>
<a href="#page9" class="go"></a>
<a href="#page10" class="go"></a>
<a href="#page11" class="go"></a>
<a href="#page12" class="go"></a>
<a href="#page13" class="go"></a>
<a href="#page14" class="go"></a>
<a href="#page15" class="go"></a>
<a href="#page16" class="go"></a>
</div>
<div><a href="https://www.script-tutorials.com/fullscreen-javascript-slide-navigation/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a></div>
</div>
</div>
</body>
</html>
步骤2. CSS (Step 2. CSS)
Now – stylesheets for our slides:
现在-我们幻灯片的样式表：
css / layout.css (css/layout.css)
*{
margin:0;
padding:0;
}
body {
background-color:#aaa;
color:#fff;
font:16px Arial,sans-serif;
font-weight:700;
margin:0px;
padding:0px;
background:#111;
width:100%;
height:100%;
}
a.stuts,a.stuts:visited{
color: #FCFCFC;
font-size: 14px;
text-decoration: none;
}
.stuts span {
font-size:22px;
font-weight:bold;
margin-left:5px;
}
.container {
position: absolute;
left: 0;
top: 0;
background: #000;
overflow: hidden;
width: 100%;
height: 100%;
}
#pages {
left:0;
position:absolute;
top:0;
}
#nav {
background-color:rgba(0, 0, 0, 0.8);
margin:0;
outline:#333 solid 1px;
padding:10px;
position:fixed;
right:200px;
top:50px;
width:200px;
}
#nav div a.go {
background:#333;
float:left;
height:25px;
margin:3px;
overflow:hidden;
text-decoration:none;
width:25px;
}
#nav div a.go:visited,#nav div a.visited {
background-color:#666;
}
#nav div a.go:active,#nav div a.active {
background-color:#fff !important;
}
#nav div a.go:hover,#nav div a.go:focus {
background-color:#00f;
}
#pages > div {
height:1100px;
position:absolute;
width:1700px;
}
#page1 {
background:url(../images/1.jpg) no-repeat center center;
left:0;
top:0;
}
#page2 {
background:url(../images/2.jpg) no-repeat center center;
left:1800px;
top:0;
}
#page3 {
background:url(../images/3.jpg) no-repeat center center;
left:3600px;
top:0;
}
#page4 {
background:url(../images/4.jpg) no-repeat center center;
left:5400px;
top:0;
}
#page5 {
background:url(../images/5.jpg) no-repeat center center;
left:0;
top:1300px;
}
#page6 {
background:url(../images/6.jpg) no-repeat center center;
left:1800px;
top:1300px;
}
#page7 {
background:url(../images/7.jpg) no-repeat left center;
left:3600px;
top:1300px;
}
#page8 {
background:url(../images/8.jpg) no-repeat center center;
left:5400px;
top:1300px;
}
#page9 {
background:url(../images/9.jpg) no-repeat center center;
left:0;
top:2600px;
}
#page10 {
background:url(../images/10.jpg) no-repeat center center;
left:1800px;
top:2600px;
}
#page11 {
background:url(../images/11.jpg) no-repeat center center;
left:3600px;
top:2600px;
}
#page12 {
background:url(../images/12.jpg) no-repeat center center;
left:5400px;
top:2600px;
}
#page13 {
background:url(../images/13.jpg) no-repeat center center;
left:0;
top:3900px;
}
#page14 {
background:url(../images/14.jpg) no-repeat center center;
left:1800px;
top:3900px;
}
#page15 {
background:url(../images/15.jpg) no-repeat center center;
left:3600px;
top:3900px;
}
#page16 {
background:url(../images/16.jpg) no-repeat center center;
left:5400px;
top:3900px;
}
#pages .left {
border-bottom:transparent solid 50px;
border-right:#FFF solid 80px;
border-top:transparent solid 50px;
height:0;
left:20px;
position:absolute;
top:50%;
width:0;
}
#pages .right {
border-bottom:transparent solid 50px;
border-left:#FFF solid 80px;
border-top:transparent solid 50px;
height:0;
position:absolute;
right:20px;
top:50%;
width:0;
}
#pages .top {
border-bottom:#FFF solid 80px;
border-left:transparent solid 50px;
border-right:transparent solid 50px;
height:0;
left:50%;
position:absolute;
top:20px;
width:0;
}
#pages .bottom {
border-left:transparent solid 50px;
border-right:transparent solid 50px;
border-top:#FFF solid 80px;
bottom:20px;
height:0;
left:50%;
position:absolute;
width:0;
}
#pages .left:hover {
border-right:red solid 80px;
}
#pages .right:hover {
border-left:red solid 80px;
}
#pages .top:hover {
border-bottom:red solid 80px;
}
#pages .bottom:hover {
border-top:red solid 80px;
}
#nav > div {
margin:10px auto;
overflow:hidden;
text-align:center;
}
*{
margin:0;
padding:0;
}
body {
background-color:#aaa;
color:#fff;
font:16px Arial,sans-serif;
font-weight:700;
margin:0px;
padding:0px;
background:#111;
width:100%;
height:100%;
}
a.stuts,a.stuts:visited{
color: #FCFCFC;
font-size: 14px;
text-decoration: none;
}
.stuts span {
font-size:22px;
font-weight:bold;
margin-left:5px;
}
.container {
position: absolute;
left: 0;
top: 0;
background: #000;
overflow: hidden;
width: 100%;
height: 100%;
}
#pages {
left:0;
position:absolute;
top:0;
}
#nav {
background-color:rgba(0, 0, 0, 0.8);
margin:0;
outline:#333 solid 1px;
padding:10px;
position:fixed;
right:200px;
top:50px;
width:200px;
}
#nav div a.go {
background:#333;
float:left;
height:25px;
margin:3px;
overflow:hidden;
text-decoration:none;
width:25px;
}
#nav div a.go:visited,#nav div a.visited {
background-color:#666;
}
#nav div a.go:active,#nav div a.active {
background-color:#fff !important;
}
#nav div a.go:hover,#nav div a.go:focus {
background-color:#00f;
}
#pages > div {
height:1100px;
position:absolute;
width:1700px;
}
#page1 {
background:url(../images/1.jpg) no-repeat center center;
left:0;
top:0;
}
#page2 {
background:url(../images/2.jpg) no-repeat center center;
left:1800px;
top:0;
}
#page3 {
background:url(../images/3.jpg) no-repeat center center;
left:3600px;
top:0;
}
#page4 {
background:url(../images/4.jpg) no-repeat center center;
left:5400px;
top:0;
}
#page5 {
background:url(../images/5.jpg) no-repeat center center;
left:0;
top:1300px;
}
#page6 {
background:url(../images/6.jpg) no-repeat center center;
left:1800px;
top:1300px;
}
#page7 {
background:url(../images/7.jpg) no-repeat left center;
left:3600px;
top:1300px;
}
#page8 {
background:url(../images/8.jpg) no-repeat center center;
left:5400px;
top:1300px;
}
#page9 {
background:url(../images/9.jpg) no-repeat center center;
left:0;
top:2600px;
}
#page10 {
background:url(../images/10.jpg) no-repeat center center;
left:1800px;
top:2600px;
}
#page11 {
background:url(../images/11.jpg) no-repeat center center;
left:3600px;
top:2600px;
}
#page12 {
background:url(../images/12.jpg) no-repeat center center;
left:5400px;
top:2600px;
}
#page13 {
background:url(../images/13.jpg) no-repeat center center;
left:0;
top:3900px;
}
#page14 {
background:url(../images/14.jpg) no-repeat center center;
left:1800px;
top:3900px;
}
#page15 {
background:url(../images/15.jpg) no-repeat center center;
left:3600px;
top:3900px;
}
#page16 {
background:url(../images/16.jpg) no-repeat center center;
left:5400px;
top:3900px;
}
#pages .left {
border-bottom:transparent solid 50px;
border-right:#FFF solid 80px;
border-top:transparent solid 50px;
height:0;
left:20px;
position:absolute;
top:50%;
width:0;
}
#pages .right {
border-bottom:transparent solid 50px;
border-left:#FFF solid 80px;
border-top:transparent solid 50px;
height:0;
position:absolute;
right:20px;
top:50%;
width:0;
}
#pages .top {
border-bottom:#FFF solid 80px;
border-left:transparent solid 50px;
border-right:transparent solid 50px;
height:0;
left:50%;
position:absolute;
top:20px;
width:0;
}
#pages .bottom {
border-left:transparent solid 50px;
border-right:transparent solid 50px;
border-top:#FFF solid 80px;
bottom:20px;
height:0;
left:50%;
position:absolute;
width:0;
}
#pages .left:hover {
border-right:red solid 80px;
}
#pages .right:hover {
border-left:red solid 80px;
}
#pages .top:hover {
border-bottom:red solid 80px;
}
#pages .bottom:hover {
border-top:red solid 80px;
}
#nav > div {
margin:10px auto;
overflow:hidden;
text-align:center;
}
步骤3. JS (Step 3. JS)
ANd now – our javascript code:
现在和–我们JavaScript代码：
js / main.js (js/main.js)
var navi = {
// variables
aPages : [],
aLinks : [],
tween : {},
oParent : null,
oPages : null,
bRunning : null,
sTargPage : null,
sCurPage : null,
bHash : null,
sOldH : null,
bUpdateH : true,
// initialization
init : function (aParams) {
this.oPages = document.getElementById(aParams.pages_id);
this.oParent = document.getElementById(aParams.parent_id);
var aAEls = this.oParent.getElementsByTagName('a');
var i = 0; var p = null;
while (p = aAEls[i++]) {
if (p.className && p.className.indexOf('go') >= 0) {
var sHref = p.href.split('#')[1];
var oDst = document.getElementById(sHref);
if (oDst) {
// fill-in pages array
this.aPages[sHref] = {
oObj: oDst,
iXPos: -oDst.offsetLeft,
iYPos: -oDst.offsetTop
};
// fill-in links array
this.aLinks.push({a: p, oObj: oDst});
p.onclick = function () {
navi.goto(this.href.split('#')[1], aParams.duration);
return false;
}
}
}
}
this.resize();
if ('onhashchange' in window) {
if (location.hash !== '' && location.hash !== '#') {
this.sOldH = location.hash.substring(1);
this.goto(this.sOldH, -1);
} else
this.goto('page1', -1);
this.bHash = true;
window.onhashchange = function() {
if (location.hash.substring(1) !== navi.sOldH) {
navi.sOldH = location.hash.substring(1);
if (navi.sOldH == '') {
navi.bUpdateH = false;
}
navi.goto(navi.sOldH, aParams.duration);
}
return false;
}
}
},
// on resize
resize : function () {
var iCurW = this.oParent.offsetWidth; // current sizes
var iCurH = this.oParent.offsetHeight;
for (var i in this.aPages) { // for each page
var oPage = this.aPages[i];
var iNewX = Math.round(oPage.oObj.offsetLeft * iCurW / oPage.oObj.offsetWidth); // new sizes
var iNewY = Math.round(oPage.oObj.offsetTop * iCurH / oPage.oObj.offsetHeight);
oPage.oObj.style.left = iNewX + 'px';
oPage.oObj.style.top = iNewY + 'px';
oPage.oObj.style.width = iCurW + 'px';
oPage.oObj.style.height = iCurH + 'px';
oPage.iXPos = -iNewX;
oPage.iYPos = -iNewY;
if (this.sCurPage)
this.goto(this.sCurPage, -1);
}
},
goto : function (sHref, iDur) {
this.tween.iStart = new Date() * 1;
this.tween.iDur = iDur;
this.tween.fromX = this.oPages.offsetLeft;
this.tween.fromY = this.oPages.offsetTop;
this.tween.iXPos = this.aPages[sHref].iXPos - this.tween.fromX;
this.tween.iYPos = this.aPages[sHref].iYPos - this.tween.fromY;
this.sTargPage = sHref;
if (! this.bRunning)
this.bRunning = window.setInterval(this.animate, 24);
},
animate : function () {
var iCurTime = (new Date() * 1) - navi.tween.iStart;
if (iCurTime < navi.tween.iDur) {
var iCur = Math.cos(Math.PI * (iCurTime / navi.tween.iDur)) - 1;
navi.oPages.style.left = Math.round(-navi.tween.iXPos * .5 * iCur + navi.tween.fromX) + 'px';
navi.oPages.style.top = Math.round(-navi.tween.iYPos * .5 * iCur + navi.tween.fromY) + 'px';
} else {
navi.oPages.style.left = Math.round(navi.tween.fromX + navi.tween.iXPos) + 'px';
navi.oPages.style.top = Math.round(navi.tween.fromY + navi.tween.iYPos) + 'px';
window.clearInterval(navi.bRunning);
navi.bRunning = false;
navi.sCurPage = navi.sTargPage;
var i = 0; var p = null;
while (p = navi.aLinks[i++]) {
if (p.oObj.id == navi.sCurPage) {
if (p.a.className.indexOf('visited') >= 0 ) {
p.a.className = p.a.className.replace('visited', 'active');
} else p.a.className += ' active';
p.visited = true;
} else if (p.visited) {
p.a.className = p.a.className.replace('active', 'visited');
}
}
if (navi.bHash) {
if (navi.bUpdateH) {
navi.sOldH = navi.sCurPage;
window.location.hash = navi.sCurPage;
}
navi.bUpdateH = true;
}
}
}
}
window.onload = function() { // page onload
navi.init({parent_id: 'container', pages_id: 'pages', duration: 1000});
}
window.onkeydown = function(event){ // keyboard alerts
switch (event.keyCode) {
case 37: // Left key
var iPage = navi.sCurPage.substring(4) * 1;
iPage--;
if (iPage < 1) {
iPage = 1;
}
navi.goto('page' + iPage, 1000);
break;
case 39: // Right key
var iPage = navi.sCurPage.substring(4) * 1;
iPage++;
if (iPage > 16) {
iPage = 16;
}
navi.goto('page' + iPage, 1000);
break;
}
};
var navi = {
// variables
aPages : [],
aLinks : [],
tween : {},
oParent : null,
oPages : null,
bRunning : null,
sTargPage : null,
sCurPage : null,
bHash : null,
sOldH : null,
bUpdateH : true,
// initialization
init : function (aParams) {
this.oPages = document.getElementById(aParams.pages_id);
this.oParent = document.getElementById(aParams.parent_id);
var aAEls = this.oParent.getElementsByTagName('a');
var i = 0; var p = null;
while (p = aAEls[i++]) {
if (p.className && p.className.indexOf('go') >= 0) {
var sHref = p.href.split('#')[1];
var oDst = document.getElementById(sHref);
if (oDst) {
// fill-in pages array
this.aPages[sHref] = {
oObj: oDst,
iXPos: -oDst.offsetLeft,
iYPos: -oDst.offsetTop
};
// fill-in links array
this.aLinks.push({a: p, oObj: oDst});
p.onclick = function () {
navi.goto(this.href.split('#')[1], aParams.duration);
return false;
}
}
}
}
this.resize();
if ('onhashchange' in window) {
if (location.hash !== '' && location.hash !== '#') {
this.sOldH = location.hash.substring(1);
this.goto(this.sOldH, -1);
} else
this.goto('page1', -1);
this.bHash = true;
window.onhashchange = function() {
if (location.hash.substring(1) !== navi.sOldH) {
navi.sOldH = location.hash.substring(1);
if (navi.sOldH == '') {
navi.bUpdateH = false;
}
navi.goto(navi.sOldH, aParams.duration);
}
return false;
}
}
},
// on resize
resize : function () {
var iCurW = this.oParent.offsetWidth; // current sizes
var iCurH = this.oParent.offsetHeight;
for (var i in this.aPages) { // for each page
var oPage = this.aPages[i];
var iNewX = Math.round(oPage.oObj.offsetLeft * iCurW / oPage.oObj.offsetWidth); // new sizes
var iNewY = Math.round(oPage.oObj.offsetTop * iCurH / oPage.oObj.offsetHeight);
oPage.oObj.style.left = iNewX + 'px';
oPage.oObj.style.top = iNewY + 'px';
oPage.oObj.style.width = iCurW + 'px';
oPage.oObj.style.height = iCurH + 'px';
oPage.iXPos = -iNewX;
oPage.iYPos = -iNewY;
if (this.sCurPage)
this.goto(this.sCurPage, -1);
}
},
goto : function (sHref, iDur) {
this.tween.iStart = new Date() * 1;
this.tween.iDur = iDur;
this.tween.fromX = this.oPages.offsetLeft;
this.tween.fromY = this.oPages.offsetTop;
this.tween.iXPos = this.aPages[sHref].iXPos - this.tween.fromX;
this.tween.iYPos = this.aPages[sHref].iYPos - this.tween.fromY;
this.sTargPage = sHref;
if (! this.bRunning)
this.bRunning = window.setInterval(this.animate, 24);
},
animate : function () {
var iCurTime = (new Date() * 1) - navi.tween.iStart;
if (iCurTime < navi.tween.iDur) {
var iCur = Math.cos(Math.PI * (iCurTime / navi.tween.iDur)) - 1;
navi.oPages.style.left = Math.round(-navi.tween.iXPos * .5 * iCur + navi.tween.fromX) + 'px';
navi.oPages.style.top = Math.round(-navi.tween.iYPos * .5 * iCur + navi.tween.fromY) + 'px';
} else {
navi.oPages.style.left = Math.round(navi.tween.fromX + navi.tween.iXPos) + 'px';
navi.oPages.style.top = Math.round(navi.tween.fromY + navi.tween.iYPos) + 'px';
window.clearInterval(navi.bRunning);
navi.bRunning = false;
navi.sCurPage = navi.sTargPage;
var i = 0; var p = null;
while (p = navi.aLinks[i++]) {
if (p.oObj.id == navi.sCurPage) {
if (p.a.className.indexOf('visited') >= 0 ) {
p.a.className = p.a.className.replace('visited', 'active');
} else p.a.className += ' active';
p.visited = true;
} else if (p.visited) {
p.a.className = p.a.className.replace('active', 'visited');
}
}
if (navi.bHash) {
if (navi.bUpdateH) {
navi.sOldH = navi.sCurPage;
window.location.hash = navi.sCurPage;
}
navi.bUpdateH = true;
}
}
}
}
window.onload = function() { // page onload
navi.init({parent_id: 'container', pages_id: 'pages', duration: 1000});
}
window.onkeydown = function(event){ // keyboard alerts
switch (event.keyCode) {
case 37: // Left key
var iPage = navi.sCurPage.substring(4) * 1;
iPage--;
if (iPage < 1) {
iPage = 1;
}
navi.goto('page' + iPage, 1000);
break;
case 39: // Right key
var iPage = navi.sCurPage.substring(4) * 1;
iPage++;
if (iPage > 16) {
iPage = 16;
}
navi.goto('page' + iPage, 1000);
break;
}
};
现场演示
打包下载
结论 (Conclusion)
Finally we have prepared interested result! I hope that this will interesting addition to your website. Don’t forget to tell thanks and leave a comment. Good luck!
最后我们准备了感兴趣的结果！ 希望这会对您的网站有所帮助。 别忘了感谢并发表评论。 祝好运！
翻译自: https://www.script-tutorials.com/fullscreen-javascript-slide-navigation/
html设置幻灯片铺满全屏
833
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
