Line 1: | Line 1: | ||
− | + | <html> | |
− | . | + | <style> |
− | + | .homeMainImage { | |
− | + | transition: opacity 0.5s ease-out; | |
− | + | position:absolute !important; | |
− | + | height:100%; | |
− | + | /* top:0%; | |
− | + | left:0%;*/ | |
− | + | opacity:0; | |
− | + | } | |
+ | #homeImage0 { | ||
+ | opacity:1; | ||
+ | } | ||
− | / | + | </style> |
− | + | <style id="mainState0"> | |
− | + | #homeImage0 {opacity:1;} | |
− | + | </style> | |
− | + | ||
− | + | <style id="mainState1"> | |
+ | #homeImage1 {opacity:1;} | ||
+ | |||
+ | |||
+ | </style> | ||
+ | |||
+ | <style id="mainState2"> | ||
+ | #homeImage2 {opacity:1;} | ||
+ | |||
+ | |||
+ | </style> | ||
+ | <style id="mainState3"> | ||
+ | #homeImage3 {opacity:1;} | ||
+ | |||
+ | |||
+ | </style> | ||
+ | <style id="mainState4"> | ||
+ | #homeImage4 {opacity:1;} | ||
+ | |||
+ | </style> | ||
+ | <style id="mainState5"> | ||
+ | #homeImage5 {opacity:1;} | ||
+ | |||
+ | |||
+ | </style> | ||
+ | <style id="mainState6"> | ||
+ | #homeImage6 {opacity:1;} | ||
+ | </style> | ||
+ | |||
+ | <script> | ||
+ | var homeMainStates = [ | ||
+ | document.getElementById('mainState0'), | ||
+ | document.getElementById('mainState1'), | ||
+ | document.getElementById('mainState2'), | ||
+ | document.getElementById('mainState3'), | ||
+ | document.getElementById('mainState4'), | ||
+ | document.getElementById('mainState5') | ||
+ | ]; | ||
+ | var homeMainCaptions = [ | ||
+ | "<h3>Flip through our slideshow or browse our page to learn about the exciting new way to detect cancer!</h3>", | ||
+ | "<h3>Blood is extracted from patients with a risk for metastasis. Red blood cells are separated from the blood and the remaining fluid is incubated in sTRAIL to induce apoptosis in circulating tumor cells.</h3>", | ||
+ | "<h3>Bacteria and human cells are mixed and sent through the chip.</h3>", | ||
+ | "<h3>Our bacteria express Annexin V on their membranes.</h3>", | ||
+ | "<h3>Allowing them to bind to phosphatidylserine expressed on the outer membrane of the cancer cells.</h3>", | ||
+ | "<h3>The bacteria sense this binding through signaling and fluoresce green.</h3>", | ||
+ | "<h3>A green signal indicates that a cancer cell has been found.</h3>" | ||
+ | ]; | ||
+ | var curMainState = 0; | ||
+ | var numMainStates = homeMainStates.length; | ||
+ | |||
+ | $(function() { | ||
+ | for (var i=1;i<numMainStates;i++) { | ||
+ | homeMainStates[i].disabled = true; | ||
+ | } | ||
+ | document.getElementById('homeMainCaption').innerHTML = homeMainCaptions[0]; | ||
+ | }); | ||
+ | |||
+ | function changeState(dir) { | ||
+ | if (document.getElementById('homeMainContainer').className == "content") { | ||
+ | document.getElementById('homeMainContainer').className = "content running"; | ||
+ | if (dir==1) { | ||
+ | if (curMainState == numMainStates-1) { | ||
+ | curMainState = numMainStates; | ||
+ | while (curMainState--) { | ||
+ | homeMainStates[curMainState].disabled = true; | ||
+ | } | ||
+ | } else { | ||
+ | homeMainStates[curMainState+1].disabled = false; | ||
+ | } | ||
+ | } else { | ||
+ | if (curMainState) { | ||
+ | homeMainStates[curMainState].disabled = true; | ||
+ | } else { | ||
+ | curMainState = 1; | ||
+ | } | ||
+ | } | ||
+ | curMainState += dir; | ||
+ | document.getElementById('homeMainCaption').innerHTML = homeMainCaptions[curMainState]; | ||
+ | setTimeout(function(){document.getElementById('homeMainContainer').className = "content";},700); | ||
+ | } | ||
} | } | ||
+ | </script> | ||
− | + | <style> | |
− | + | #homeMainArrowNext, #homeMainArrowPrev { | |
− | + | position:absolute; | |
− | + | top:50%; | |
− | + | font-size:500%; | |
− | + | display:none; | |
− | + | } | |
− | + | #homeMainArrowNext { | |
− | + | right:0; | |
+ | } | ||
+ | #homeMainArrowPrev { | ||
+ | left:0; | ||
+ | } | ||
+ | #homeMainContainer:hover #homeMainArrowNext, #homeMainContainer:hover #homeMainArrowPrev { | ||
+ | display:block; | ||
} | } | ||
</style> | </style> | ||
− | </ | + | </html> |
Latest revision as of 18:33, 3 October 2016