Div Slideshow (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. But the problem is that I'm not yet knowledgeable with javascript. If you dont mind please do check my codes for some problems. Thank you.

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

Use slideShow(); at the end of your javascript code.

Anyway, I recommend you to use http://unslider.com/ as a jQuery plugin.

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.

<!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

setInterval('animate()', 1000);

Or

setInterval(animate, 1000);

Div Slideshow (html, css, js)

Question

3 answers

solution1
1 2016-07-23 23:55:29

solution2
1 2017-04-20 06:24:51

solution3
0 2016-07-24 00:02:26

Div Slideshow (html, css, js)

Question

3 answers

solution1 1 2016-07-23 23:55:29

solution2 1 2017-04-20 06:24:51

solution3 0 2016-07-24 00:02:26

solution1
1 2016-07-23 23:55:29

solution2
1 2017-04-20 06:24:51

solution3
0 2016-07-24 00:02:26