Video/article slider. I have created a video/article slider. It works fine, but I have a feeling it's not quite a standard solution.

I would appreciate it if someone could review my code, so that if there are mistakes, I could learn from them.

&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;
&lt;script&gt; 

var move = function slide() {
    $('#container').animate({'marginLeft' : '-=707px'}, 500);
}

 //setInterval(function(){slide()},3000000);

&lt;/script&gt; 


&lt;script&gt;

  window.addEventListener("load", function(){

      //slide 1, slide 2
      setTimeout(function(){       
      var video0 = document.createElement('video');
      video0.src = 'images/video/trx.mp4';
      video0.id = 'video0';

      video0.autoplay = true;
      video0.controls = true;

      document.getElementById("vidcont_0").appendChild(video0) 


       slide2();
       },30000);


 });

       //slide 3
       var slide2 = function(){     
       move(); 

       setTimeout(function(){       
       slide3();    
    }, 30000);

}

        //slide 4
        var slide3 = function(){            
        move();  

        setTimeout(function(){ 
        var video1 = document.createElement('video');
        video1.src = 'images/video/trx.mp4';
        video1.id = 'video1';

        video1.autoplay = true;
        video1.controls = true;

        document.getElementById("vidcont_1").appendChild(video1);          
        slide4();

         }, 30000);

}

        //slide 5
        var slide4 = function(){        
        move();        
        setTimeout(function(){      
        slide5();   

       }, 30000);

}


        //slide 6
        function slide5(){          
        move();  

        setTimeout(function(){

        video2 = document.createElement('video');
        video2.src = 'images/video/trx.mp4';
        video2.id = 'video2';

        video2.autoplay = true;
        video2.controls = true;

       document.getElementById("vidcont_2").appendChild(video2);        
       //window.open("http://server.info-spot.net", "_self");    
       slide6();       

      }, 30000);

}

        //slide 7
        var slide6 = function(){    
        move();        
        setTimeout(function(){      

       move();

       }, 30000);

}






&lt;/script&gt;
 &lt;style type="text/css"&gt;

 body {}
 #wrapper {width:707px; height:820px;overflow:;}
 #container {width:5000px;height:820px;}

#video0 {width:707px; height:820px;float:left;}
#video1 {width:707px;height:820px;float:left;background:##F93;}
#video2 {width:707px;height:820px;float:left;background:#093;}
#video3 {width:707px;height:820px;float:left;background:#F0F;}
#article0 {float:left;width:707px;height:820px;background:#999;}
#article1 {float:left;width:707px;height:820px;background:#f00;}
#article2 {float:left;width:707px;height:820px;background:#06F;}
#article3 {float:left;width:707px;height:820px;background:#06F;}

&lt;/style&gt;


&lt;/head&gt;
&lt;body&gt;



&lt;div id="wrapper"&gt;
&lt;div id="container"&gt;

&lt;div id="article0"&gt;Article 0&lt;/div&gt;

&lt;div id="vidcont_0"&gt;&lt;/div&gt; 

&lt;div id="article1"&gt;Article 1&lt;/div&gt;

&lt;div id="vidcont_1"&gt;&lt;/div&gt; 

&lt;div id="article2"&gt;Article 2&lt;/div&gt;

&lt;div id="vidcont_2"&gt;&lt;/div&gt; 

&lt;div id="article3"&gt;Article 3&lt;/div&gt;





&lt;/div&gt;&lt;!----end container---&gt; 
&lt;/div&gt;   &lt;!----end wrapper---&gt;
&lt;/body&gt;
&lt;/html&gt;
I would consider having the css be in an external css file and javascript in an external js file since there is quite a bit of non-HTML code, but that is just my own preference.

I would get rid of extra whitespace and a lot of rework can be done with indentation to make the code more readable. 

You can also group variable assignments together:

var video1 = document.createElement('video');
video1.src = 'images/video/trx.mp4';
video1.id = 'video1';
video1.autoplay = true;
video1.controls = true;


And group methods together:

document.getElementById("vidcont_2").appendChild(video2);        
slide6();


I would consolidate &lt;script&gt; tags that are right next to each other.

Remove old code that is commented out if you're not planning on using it.



Reformatted:

&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"&gt;

var move = function slide() {
    $('#container').animate({'marginLeft' : '-=707px'}, 500);
}

window.addEventListener("load", function(){

    //slide 1, slide 2
    setTimeout(function(){
        var video0 = document.createElement('video');
        video0.src = 'images/video/trx.mp4';
        video0.id = 'video0';
        video0.autoplay = true;
        video0.controls = true;

        document.getElementById("vidcont_0").appendChild(video0);
        slide2();

    },30000);
});

//slide 3
var slide2 = function(){     

    move(); 

    setTimeout(function(){       
        slide3();    
     }, 30000);
}

//slide 4
var slide3 = function(){            
    move();  

    setTimeout(function(){ 
        var video1 = document.createElement('video');
        video1.src = 'images/video/trx.mp4';
        video1.id = 'video1';
        video1.autoplay = true;
        video1.controls = true;

        document.getElementById("vidcont_1").appendChild(video1);          
        slide4();

         }, 30000);
    }

    //slide 5
    var slide4 = function(){        
    move();        
    setTimeout(function(){      
    slide5();   

    }, 30000);
}

//slide 6
function slide5(){          
     move();  

     setTimeout(function(){
         video2 = document.createElement('video');
         video2.src = 'images/video/trx.mp4';
         video2.id = 'video2';
         video2.autoplay = true;
         video2.controls = true;

         document.getElementById("vidcont_2").appendChild(video2);        
         slide6();       

      }, 30000);
}

//slide 7
var slide6 = function(){    
    move();        
    setTimeout(function(){      
        move();
    }, 30000);
}

&lt;/script&gt;

&lt;style type="text/css"&gt;
body {}
#wrapper {width:707px; height:820px;overflow:;}
#container {width:5000px;height:820px;}
#video0 {width:707px; height:820px;float:left;}
#video1 {width:707px;height:820px;float:left;background:##F93;}
#video2 {width:707px;height:820px;float:left;background:#093;}
#video3 {width:707px;height:820px;float:left;background:#F0F;}
#article0 {float:left;width:707px;height:820px;background:#999;}
#article1 {float:left;width:707px;height:820px;background:#f00;}
#article2 {float:left;width:707px;height:820px;background:#06F;}
#article3 {float:left;width:707px;height:820px;background:#06F;}
&lt;/style&gt;

&lt;/head&gt;

&lt;body&gt;
&lt;div id="wrapper"&gt;
    &lt;div id="container"&gt;
        &lt;div id="article0"&gt;Article 0&lt;/div&gt;
        &lt;div id="vidcont_0"&gt;&lt;/div&gt; 
        &lt;div id="article1"&gt;Article 1&lt;/div&gt;
        &lt;div id="vidcont_1"&gt;&lt;/div&gt; 
        &lt;div id="article2"&gt;Article 2&lt;/div&gt;
        &lt;div id="vidcont_2"&gt;&lt;/div&gt; 
       &lt;div id="article3"&gt;Article 3&lt;/div&gt;
    &lt;/div&gt;&lt;!----end container---&gt; 
&lt;/div&gt;   &lt;!----end wrapper---&gt;
&lt;/body&gt;

&lt;/html&gt;


Additional Note: I would also improve the comments to be more descriptive and helpful.


&lt;!----end container---&gt; is unnecessary if you have proper indentation
//slide 5 right before var slide4 is confusing
If you keep HTML, CSS, and JavaScript in the same file I would comment each section as such.