|
|
| (33 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; }
| |
| − |
| |
| − | #forward, #reverse {
| |
| − | border-radius:50%;
| |
| − | }
| |
| − |
| |
| − | .show {
| |
| − | transition:display, 2s;
| |
| − | }
| |
| − | </style>
| |
| − |
| |
| − | <body>
| |
| − | <center>
| |
| − | <div style = "opacity:.2; width:7vw; height:7vw; background-color:white; text-align:center; font-size:300%; position:absolute; z-index:100; left: 93%; top:50vh;" id = "forward"><div style = "height:3vw"></div>></div>
| |
| − | <div style = "opacity:.2; width:7vw; height:7vw; background-color:white; text-align:center; font-size:300%; position:absolute; top:50vh; z-index:100;" id = "reverse"><div style = "height:3vw"></div><</div>
| |
| − | <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>
| |
| − | </center>
| |
| − |
| |
| − | </body>
| |
| − |
| |
| − | <script type="text/javascript">
| |
| − | $(document).ready(
| |
| − | function(){
| |
| − | var n = 1;
| |
| − | setInterval(function () {
| |
| − | n = n+1;
| |
| − | if (n > 5) {
| |
| − | $("#one").css('display', 'block');
| |
| − | $("#two").css('display', 'none');
| |
| − | $("#three").css('display', 'none');
| |
| − | $("#four").css('display', 'none');
| |
| − | n = 2;}
| |
| − | else if (n == 2) {
| |
| − | $("#one").css('display', 'block');
| |
| − | $("#two").css('display', 'none');
| |
| − | $("#three").css('display', 'none');
| |
| − | $("#four").css('display', 'none'); }
| |
| − | else if (n==3) {
| |
| − | $('#two').css('display', 'block');
| |
| − | $("#one").css('display', 'none');
| |
| − | $("#three").css('display', 'none');
| |
| − | $("#four").css('display', 'none');}
| |
| − | else if (n==4) {
| |
| − | $("#three").css('display', 'block');
| |
| − | $("#one").css('display', 'none');
| |
| − | $("#two").css('display', 'none');
| |
| − | $("#four").css('display', 'none');}
| |
| − | else if (n==5) {
| |
| − | $("#four").css('display', 'block');
| |
| − | $("#one").css('display', 'none');
| |
| − | $("#two").css('display', 'none');
| |
| − | $("#three").css('display', 'none');}
| |
| − | }, 3000);
| |
| − | });
| |
| − | </script>
| |
| − |
| |
| − | </html>
| |
