|
|
| (27 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| − | <html>
| |
| − | <style>
| |
| | | | |
| − | #sideMenu, #top_title {display:none;}
| |
| − | body {background-color:white; }
| |
| − | #content { padding:0px; width:100%; margin-top:-7px; margin-left:0px;}
| |
| − | #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
| |
| − |
| |
| − | #one {
| |
| − | position:absolute;
| |
| − | left:10%;
| |
| − | }
| |
| − |
| |
| − | #two {
| |
| − | position:absolute;
| |
| − | left:-110%;
| |
| − | }
| |
| − |
| |
| − | #three {
| |
| − | position:absolute;
| |
| − | left:-110%;
| |
| − | }
| |
| − |
| |
| − | #four {
| |
| − | position:absolute;
| |
| − | left:-110%;
| |
| − | }
| |
| − |
| |
| − | #container {
| |
| − | width:100%;
| |
| − | height:80vh;
| |
| − | position:absolute;
| |
| − | background-color:blue;
| |
| − | overflow:hidden;
| |
| − | }
| |
| − |
| |
| − | </style>
| |
| − |
| |
| − | <body>
| |
| − | <div id = "container">
| |
| − | <div style = "width:80%; height:80vh; background-color:green;" id = "one" class = "show"></div>
| |
| − | <div style = "width:80%; height:80vh; background-color:purple; display:none;" id = "two" class = "show"></div>
| |
| − | <div style = "width:80%; height:80vh; background-color:black; display:none;" id = "three" class = "show"></div>
| |
| − | <div style = "width:80%; height:80vh; background-color:red; display:none;" id = "four" class = "show"></div>
| |
| − | </div>
| |
| − | <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
| |
| − |
| |
| − | </body>
| |
| − |
| |
| − | <script type="text/javascript">
| |
| − | $(document).ready(
| |
| − | function(){
| |
| − | var n = 2;
| |
| − | setInterval(function () {
| |
| − | n = n+1;
| |
| − | if (n==3) {
| |
| − | $('#two').animate({'left':'10%'}, 500);
| |
| − | $("#one").animate({'left':'110%'}, 500);}
| |
| − | else if (n==4) {
| |
| − | $("#three").css('left', '-110%');
| |
| − | $('#three').animate({'left':'10%'}, 500);
| |
| − | $("#two").animate({'left':'110%'}, 500);}
| |
| − | else if (n==5) {
| |
| − | $("#four").css('left', '-110%');
| |
| − | $('#four').animate({'left':'10%'}, 500);
| |
| − | $("#three").animate({'left':'110%'}, 500);}
| |
| − | else if (n == 6) {
| |
| − | $("#one").css('left', '-110%');
| |
| − | $("#four").animate({'left':'110%'}, 500);
| |
| − | $("#one").animate({'left':'10%'}, 500);
| |
| − | n = 2;}
| |
| − | }, 3000);
| |
| − | });
| |
| − | </script>
| |
| − |
| |
| − | </html>
| |
