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.<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js type=text/javascript></script><script> var move = function slide() {    $('#container').animate({'marginLeft' : '-=707px'}, 500);} //setInterval(function(){slide()},3000000);</script> <script>  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);}</script> <style type=text/css> 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;}</style></head><body><div id=wrapper><div id=container><div id=article0>Article 0</div><div id=vidcont_0></div> <div id=article1>Article 1</div><div id=vidcont_1></div> <div id=article2>Article 2</div><div id=vidcont_2></div> <div id=article3>Article 3</div></div><!----end container---> </div>   <!----end wrapper---></body></html>
Video/article slider.
javascript