-1
私はウェブページの作成に旅を始めています。私は、ブラウザ上にアニメーションだけでなく、UIを開始するウィンドウ10を真似しようとする何かを渇望しています。しかし、問題は私がまだjavascriptに精通していないということです。あなたが気にしないなら、いくつかの問題について私のコードをチェックしてください。ありがとうございました。Divスライドショー（html、css、js）
HTML
<!DOCTYPE html>
<html>
<head>
<title>WinCalc</title>
<link rel="stylesheet" type="text/css" href="index.css">
<script type="text/javascript" src="index.js"></script>
</head>
<body onload="slideShow()">
<form method="POST" action="" autocomplete="off">
<div id="holder">
<div id="wrapper">
<div id="savButtondesc">
<div id="savDesc"> Sum, Average & Max</div>
<div id="savDesc1"> Display Sum, Average & Max of the number inputted.</div>
</div>
<input id="savButton" type="button" name="sav">
</div>
</div>
</form>
</body>
</html>
CSS
@font-face {
font-family: RobotoL;
src:url(fonts/Roboto-Light.ttf);
}
body {
overflow: hidden;
}
#holder {
width: 50%;
height: 100%;
margin-left: 25%;
margin-right: 25%;
position: absolute;
background-color: #34495e;
}
#wrapper {
background-color: white;
position: absolute;
margin-top: 24%;
margin-bottom: 25%;
margin-right: 25%;
margin-left: 25%;
width: 50%;
height: 50%;
}
#savButton {
border-style: none;
background-color: #3498db;
position: relative;
opacity: .1;
height: 50%;
width: 100%;
}
#savButtondesc {
background-color: red;
width: 100%;
height: 50%;
position: absolute;
}
#savDesc {
width: 100;
margin-top: 17%;
margin-bottom: 20%;
margin-right: 10%;
margin-left: 10%;
font-family: RobotoL;
font-size: 30px;
color: white;
transition: 1s;
}
#savDesc1 {
font-family: RobotoL;
font-size: 15px;
color: white;
margin-left: 1%;
margin-top: -50%;
transition: 1s;
opacity: 0;
}
はJavaScript
function slideShow() {
setInterval(function show(){
var next = 0;
if (next == 0) {
animate();
next++:
}
else {
reverse();
next--;
}
},1000);
}
function animate(){
document.getElementById('samDesc').style.marginTop = "-2%";
document.getElementById('samDesc1').style.marginTop = "25%";
document.getElementById('samDesc1').style.opacity = "1";
document.getElementById('samDesc').style.opacity = "0";
}
function reverse(){
document.getElementById('samDesc').style.marginTop = "17%";
document.getElementById('samvDesc1').style.marginTop = "-55%";
document.getElementById('samDesc1').style.opacity = "0";
document.getElementById('samDesc').style.opacity = "1";
}
ようこそスタックオーバーフロー。 * "私のコードで問題をチェックしてください" * - あなたの質問を編集して、望ましい動作と実際の動作をより明確に記述してください。コードを実行すると何が起こりますか？ （何もありませんが、間違ったことは？ブラウザの開発コンソールにエラーがありますか？） – nnnnnn
申し訳ありません。私が本当に表現したいのは、animate（）が実行されたときに、1000ミリ秒後にreverse（）がうまく行われるということです。このようなものをanimate（）してから1秒待ってからreverse（）を繰り返します。 –