Div幻灯片（html，css，js）

Question

I'm starting my journey in creating webpages. 我正在开始创建网页的旅程。 I crave something to try to imitate windows 10 start UI as well as there animation on browser. 我渴望尝试模仿Windows 10启动UI以及浏览器上的动画。 But the problem is that I'm not yet knowledgeable with javascript. 但是问题是我还不了解JavaScript。 If you dont mind please do check my codes for some problems. 如果您不介意，请检查我的代码是否有问题。 Thank you. 谢谢。

HTML 的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 的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 的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

Use slideShow(); 使用slideShow（）; at the end of your javascript code. 在您的JavaScript代码的末尾。

Anyway, I recommend you to use http://unslider.com/ as a jQuery plugin. 无论如何，我建议您使用http://unslider.com/作为jQuery插件。

Answer 2

Hi Please check this code now working you define the wrong semicolon symbol the next++; 您好，请检查以下代码，在下一个++中定义错误的分号； and element id is wrong in js wrong i have fixed this issue check now this code. 和元素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

For the setInterval function in slideShow(), put either 对于slideShow（）中的setInterval函数，将

setInterval('animate()', 1000);

Or 要么

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