Div幻燈片（html，css，js）

Question

我正在開始創建網頁的旅程。 我渴望嘗試模仿Windows 10啟動UI以及瀏覽器上的動畫。 但是問題是我還不了解JavaScript。 如果您不介意，請檢查我的代碼是否有問題。 謝謝。

的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";
}

Answer 1

使用slideShow（）; 在您的JavaScript代碼的末尾。

無論如何，我建議您使用http://unslider.com/作為jQuery插件。

Answer 2

您好，請檢查以下代碼，在下一個++中定義錯誤的分號； 和元素ID在JS中是錯誤的我已經解決了這個問題，現在檢查此代碼。

<!DOCTYPE html>
<html>
<head>
    <title>WinCalc</title>
  <style>

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;

} 
 </style>
<script type="text/javascript" > 
function slideShow() {  
 var next = 0;
 setInterval( function show(){ 
    if (next == 0) {
        animate();
        next++;
    }
    else {
        reverse();
        next--;
    }
},1000);

}
function animate(){ 
    document.getElementById('savDesc').style.marginTop = "-2%";
    document.getElementById('savDesc1').style.marginTop = "25%";
    document.getElementById('savDesc1').style.opacity = "1";
    document.getElementById('savDesc').style.opacity = "0";
}
function reverse(){
    document.getElementById('savDesc').style.marginTop = "17%";
   // document.getElementById('samvDesc1').style.marginTop = "-55%";
    document.getElementById('savDesc1').style.opacity = "0";
    document.getElementById('savDesc').style.opacity = "1";
} 
</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>

Answer 3

對於slideShow（）中的setInterval函數，將

setInterval('animate()', 1000);

要么

setInterval(animate, 1000);

Div幻燈片（html，css，js）

問題描述

3 個解決方案

解決方案1
1 2016-07-23 23:55:29

解決方案2
1 2017-04-20 06:24:51

解決方案3
0 2016-07-24 00:02:26

Div幻燈片（html，css，js）

問題描述

3 個解決方案

解決方案1 1 2016-07-23 23:55:29

解決方案2 1 2017-04-20 06:24:51

解決方案3 0 2016-07-24 00:02:26

解決方案1
1 2016-07-23 23:55:29

解決方案2
1 2017-04-20 06:24:51

解決方案3
0 2016-07-24 00:02:26