Javascript SlideShow - Next , Previous Button

javascript images slider

In This Javascript Tutorial we will See How To Create A Simple Images Slider With Next And Previous Button In JS Using Netbeans Editor .
See Previous SlideShow.


Project Source Code:


<!DOCTYPE html>
<html>
    <head>
        <title>Javascript: Slider</title>
        <meta charset="windows-1252">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        <style>
            
            div{background-color: #95a5a6;width: 400px;overflow: hidden;margin: 50px auto;padding: 20px;}
            img{border: 2px solid #fff;}
            
            div button:first-of-type{float: left;}
            div button:last-of-type{float: right;}
            
            button{background-color: #fff; color: #27ae60; border: 2px solid #27ae60;
                   font-size: 20px; font-weight: bold; width: 50px; cursor: pointer;padding: 5px;}
            
        </style>
        
        <script>
            
            var i = 0,images = ["../images/img1.png",
                                "../images/img2.png",
                                "../images/img3.png",
                                "../images/img4.png"];
                            
          function mySlide(param)
          {
              if(param === 'next')
              {
                  i++;
                  if(i === images.length){ i = images.length - 1; }
              }else{
                  i--;
                  if(i < 0){ i = 0; }
              }
              
              document.getElementById('slide').src = images[i];
          }
            
        </script>
    </head>
    <body>
        
        <div>
            <img src="../images/img1.png" id="slide" alt="" width="400" height="200">
            <button onclick="mySlide('prev');"><</button>
            <button onclick="mySlide('next');">></button>
        </div>
        
    </body>
</html>


OUTPUT:

javascript slider




Javascript typewriter

How To Make A Typewriter Effect In Javascript Using setTimeout

Javascript typewriter effect



In This Javascript Tutorial we will see How To Create A Typewriter To Display Text Letter By Letter Using setTimeout In JS In Netbeans Editor .




Project Source Code:

<!DOCTYPE html>
<html>
    <head>
        <title>JS: Show Text Letter By Letter</title>
        <meta charset="windows-1252">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        
        <h1 id="hid"></h1>

        <script>
            
            var i = 1;
            function func()
            {
                var message = "This Is A Text Message Test";
                if( i <= message.length )
                {
                    
                    var txt = message.substring(0,i);
                    document.getElementById("hid").innerHTML = txt;
                    
                    if(i%2 === 0)
                    {
                        document.getElementById("hid").style.color = "BLUE";
                    }else{
                        document.getElementById("hid").style.color = "RED";
                    }
                    
                    setTimeout("func()",200);
                    i++;
                }
                
                else{
                    
                    i = 1;
                    document.getElementById("hid").innerHTML = "";
                    setTimeout("func()",1000);
                }
            }
            
            func();

        </script>
        
    </body>
</html>




CSS3 Rotate Div

How To Rotate A Div Using CSS3

css3 rotate div



In This CSS Tutorial we will see How To Rotate Div In Mouse Hover With Transition Using HTML And CSS3 Transform Property In Netbeans Editor .




Project Source Code:

<!DOCTYPE html>
<html>
    <head>
        <title>CSS3 - Rotate Div</title>
        <meta charset="windows-1252">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        <style>
            
            .container{
                background-color: #ddd;
                padding: 25px;
            }
            
            .content{
                width: 100px;height: 100px;background-color: red;
                transition: all 2s ease-in-out;
                transform: rotate(45deg);
            }
            .content:hover{
                transform: rotate(-180deg);
            }
            
            .child{width: 25px;height: 25px;}
            .child1{float: left;background-color: black;}
            .child2{float: right;background-color: yellow;}
            .child3{float: left;background-color: #fff;margin-top: 50%}
            .child4{float: right;background-color: blue;margin-top: 50%}
            
            .clearFloat{clear: both}
            
        </style>
        
    </head>
    <body>
        
        <div class="container">
            <div class="content">
                <div class="child child1"></div>
                <div class="child child2"></div>
                <div class="clearFloat"></div>
                <div class="child child3"></div>
                <div class="child child4"></div>
            </div>
        </div>
        
    </body>
</html>




CSS3 Moving A Div Animation

How To Move A Div In CSS3

css move div



In This CSS Tutorial we will see How To Make A Moving Div Animation Using Keyframes In CSS3 In Netbeans Editor .




Project Source Code:

<!DOCTYPE html>
<html>
    <head>
        <title>CSS3 - Moving Div</title>
        <meta charset="windows-1252">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        <style>
            
            .container{background-color: #ddd;padding: 25px;}
            .content{width: 100px;height: 100px;background-color: red;
                     animation: move 5s linear infinite; }
            
            @keyframes move{
                
                0%{
                    transform:translate(0);
                    opacity:0;
                }
                
                50%{
                    transform:translate(1100px);
                    opacity:1;
                }
                100%{
                    opacity:0;
                }
            }
            
        </style>
        
    </head>
    <body>

        <div class="container">
            <div class="content"></div>
        </div>
        
    </body>

</html>




JavaScript Multiplication Table

How To Create Multiplication Table In Javascript

Multiplication Table In Javascript



In This Javascript Tutorial we will see How To Make A Multiplication Table With HTML Table Using JS In Netbeans Editor .




Project Source Code:

<!DOCTYPE html>

<html>
    <head>
        <title>Javascript Multiplication Table</title>
        <meta charset="windows-1252">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>

        <script>
            
            document.write("<table border='1px'>");
            
            document.write("<tr style='font-size:30px;color:#fff;background-color:#000;'>");
            
            for(i = 1; i < 11; i++)
            {
                document.write("<th> [ " + i + " ]</th>");
            }
            
             document.write("</tr>"); 
            
            for(k = 1; k<11; k++)
            {
                var colorCode = "";
                if(k%2 === 0)
                {
                    colorCode = "#eee";
                }else{
                    colorCode = "#99e265";
                }
                
                document.write("<tr style='background-color:"+ colorCode +"'>");
                
                for(j= 1; j< 11; j++)
                {
                 document.write("<td style='font-size:23px;'>"+j+" X "+ k + " = " + j*k + "</td>")   
                }
                
                 document.write("</tr>"); 
            }

            document.write("</table>");
            
        </script>

    </body>
</html>


OUTPUT:

javascript mutiplication table




CSS Slide Rollover Animation

How To Create Slide Rollover Animation  Using CSS3




In This CSS Tutorial we will see How To Make Image Rollover Slide Using HTML And CSS3 In Netbeans Editor .




Project Source Code:

<!DOCTYPE html>
<html>
    <head>
        <title>Css Image Overflow</title>
        <meta charset="windows-1252">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <style>
          
            .main{
                height: 50px;width: 100px;overflow: hidden;
            }
            .main img{margin-top: -50px;transition: all .5s ease-in-out}
            .main img:hover{margin-top: 0}
            
            .main2{margin-top: 10px;
                height: 100px;width: 50px;overflow: hidden;
            }
            .main2 img{margin-left: 0;transition: all .5s ease-in-out}
            .main2 img:hover{margin-left: -50px;}
            
        </style>

    </head>
    <body>
        
        <div class="main">
            <!-- the image size is 100px X 100px -->
            <img src="../images/imgy.png" alt=""/> 
        </div>
        
         <div class="main2">
            <!-- the image size is 100px X 100px -->
            <img src="../images/imgx.png" alt=""/> 
        </div>
        
    </body>
</html>




CSS3 Cubic-Bezier Animation

How To Create An Animation With Cubic Bezier Using CSS3

Css3 Keyframes & Cubic-Bezier



In This CSS Tutorial we will see How To Make An Animation Using Keyframes And Cubic-Bezier Using HTML And CSS3 In Netbeans Editor .




Project Source Code:

<!DOCTYPE html>
<html>
    <head>
        <title>CSS3 Animation: Cubic-Bezier</title>
        <meta charset="windows-1252">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        <style>
            
            .main{
                width: 50px;
                height: 50px;
                background-color: red;
                border-radius:50%;
                margin: 100px auto 0 auto;
                animation: myAnimation 2s cubic-bezier(1,-0.52,0,1.76) infinite;
            }
            
            @keyframes myAnimation
            {
                0%{
                    transform:scale(1);
                    border-radius:0;
                }
                50%{
                    transform:scale(3);
                    border-radius:50%;
                }
                100%{
                    transform:scale(1);
                    border-radius:0;
                }
            }
            
        </style>
        
    </head>
    <body>
        
        <div class="main"></div>
        
    </body>
</html>

Useful WebSite Cubic-Bezier