Line 26: | Line 26: | ||
left:-110%; | left:-110%; | ||
} | } | ||
+ | |||
+ | #container { | ||
+ | width:100%; | ||
+ | height:80vh; | ||
+ | position:absolute; | ||
+ | background-color:blue; | ||
+ | overflow:hidden; | ||
+ | } | ||
+ | |||
</style> | </style> | ||
<body> | <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: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: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: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 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> | </body> | ||
Line 43: | Line 53: | ||
var n = 2; | var n = 2; | ||
setInterval(function () { | setInterval(function () { | ||
− | n = n+1; | + | n = n+1; |
− | + | if (n==3) { | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
$('#two').animate({'left':'10%'}, 500); | $('#two').animate({'left':'10%'}, 500); | ||
− | $("#one").animate({'left':' | + | $("#one").animate({'left':'110%'}, 500);} |
else if (n==4) { | else if (n==4) { | ||
− | $("#three").css('left', '110%'); | + | $("#three").css('left', '-110%'); |
$('#three').animate({'left':'10%'}, 500); | $('#three').animate({'left':'10%'}, 500); | ||
− | $("#two").animate({'left':' | + | $("#two").animate({'left':'110%'}, 500);} |
else if (n==5) { | else if (n==5) { | ||
− | $("#four").css('left', '110%'); | + | $("#four").css('left', '-110%'); |
$('#four').animate({'left':'10%'}, 500); | $('#four').animate({'left':'10%'}, 500); | ||
− | $("#three").animate({'left':' | + | $("#three").animate({'left':'110%'}, 500);} |
else if (n == 6) { | else if (n == 6) { | ||
− | $("#one").css('left', '110%'); | + | $("#one").css('left', '-110%'); |
− | $("#four").animate({'left':' | + | $("#four").animate({'left':'110%'}, 500); |
$("#one").animate({'left':'10%'}, 500); | $("#one").animate({'left':'10%'}, 500); | ||
n = 2;} | n = 2;} |
Revision as of 19:30, 15 August 2016