Line 1: | Line 1: | ||
+ | {{BostonU_we_tryin}} | ||
<html> | <html> | ||
<style> | <style> | ||
Line 6: | Line 7: | ||
#content { padding:0px; width:100%; margin-top:-7px; margin-left:0px;} | #content { padding:0px; width:100%; margin-top:-7px; margin-left:0px;} | ||
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; } | #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; } | ||
+ | |||
+ | |||
#one { | #one { | ||
Line 40: | Line 43: | ||
<div id = "container"> | <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:green;" id = "one" class = "show"></div> | ||
− | <div style = "width:80%; height:80vh; background-color:purple | + | <div style = "width:80%; height:80vh; background-color:purple;" id = "two" class = "show"></div> |
− | <div style = "width:80%; height:80vh; background-color:black | + | <div style = "width:80%; height:80vh; background-color:black;" id = "three" class = "show"></div> |
− | <div style = "width:80%; height:80vh; background-color:red | + | <div style = "width:80%; height:80vh; background-color:red;" id = "four" class = "show"></div> |
</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> | ||
</body> | </body> | ||
Line 51: | Line 54: | ||
$(document).ready( | $(document).ready( | ||
function(){ | function(){ | ||
− | + | var n = 2; | |
setInterval(function () { | setInterval(function () { | ||
− | n = n+1; | + | n = n+1; |
− | if (n== | + | if (n==2) { |
+ | $("#two").css('left', '110%') | ||
$('#two').animate({'left':'10%'}, 500); | $('#two').animate({'left':'10%'}, 500); | ||
− | $("#one").animate({'left':'110%'}, 500);} | + | $("#one").animate({'left':'-110%'}, 500);} |
+ | else if (n==3) { | ||
+ | $("#two").css('left', '110%') | ||
+ | $('#two').animate({'left':'10%'}, 500); | ||
+ | $("#one").animate({'left':'-110%'}, 500);} | ||
else if (n==4) { | else if (n==4) { | ||
− | $("#three").css('left', ' | + | $("#three").css('left', '110%'); |
$('#three').animate({'left':'10%'}, 500); | $('#three').animate({'left':'10%'}, 500); | ||
− | $("#two").animate({'left':'110%'}, 500);} | + | $("#two").animate({'left':'-110%'}, 500);} |
else if (n==5) { | else if (n==5) { | ||
− | $("#four").css('left', ' | + | $("#four").css('left', '110%'); |
$('#four').animate({'left':'10%'}, 500); | $('#four').animate({'left':'10%'}, 500); | ||
− | $("#three").animate({'left':'110%'}, 500);} | + | $("#three").animate({'left':'-110%'}, 500);} |
else if (n == 6) { | else if (n == 6) { | ||
− | $("#one").css('left', ' | + | $("#one").css('left', '110%'); |
− | $("#four").animate({'left':'110%'}, 500); | + | $("#four").animate({'left':'-110%'}, 500); |
$("#one").animate({'left':'10%'}, 500); | $("#one").animate({'left':'10%'}, 500); | ||
n = 2;} | n = 2;} | ||
− | + | }, 3000); | |
+ | |||
}); | }); | ||
</script> | </script> | ||
</html> | </html> |
Revision as of 19:57, 15 August 2016