Line 12: | Line 12: | ||
} | } | ||
− | + | .slider { | |
− | + | width: 550px; | |
− | + | margin: 2em auto; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | . | + | .slider-wrapper { |
− | + | width: 100%; | |
− | + | height: 400px; | |
− | + | position: relative; | |
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | |||
− | |||
− | |||
− | |||
.slide { | .slide { | ||
− | + | float: left; | |
− | + | position: absolute; | |
− | + | width: 100%; | |
− | + | height: 100%; | |
− | + | opacity: 0; | |
− | + | transition: opacity 3s linear; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | .slide | + | .slider-wrapper > .slide:first-child { |
− | + | opacity: 1; | |
− | + | ||
} | } | ||
+ | </style> | ||
+ | </head> | ||
− | . | + | <script> |
− | + | (function() { | |
− | + | ||
− | + | function Slideshow( element ) { | |
− | + | this.el = document.querySelector( element ); | |
+ | this.init(); | ||
+ | } | ||
+ | |||
+ | Slideshow.prototype = { | ||
+ | init: function() { | ||
+ | this.wrapper = this.el.querySelector( ".slider-wrapper" ); | ||
+ | this.slides = this.el.querySelectorAll( ".slide" ); | ||
+ | this.previous = this.el.querySelector( ".slider-previous" ); | ||
+ | this.next = this.el.querySelector( ".slider-next" ); | ||
+ | this.index = 0; | ||
+ | this.total = this.slides.length; | ||
+ | this.timer = null; | ||
+ | |||
+ | this.action(); | ||
+ | this.stopStart(); | ||
+ | }, | ||
+ | _slideTo: function( slide ) { | ||
+ | var currentSlide = this.slides[slide]; | ||
+ | currentSlide.style.opacity = 1; | ||
+ | |||
+ | for( var i = 0; i < this.slides.length; i++ ) { | ||
+ | var slide = this.slides[i]; | ||
+ | if( slide !== currentSlide ) { | ||
+ | slide.style.opacity = 0; | ||
+ | } | ||
+ | } | ||
+ | }, | ||
+ | action: function() { | ||
+ | var self = this; | ||
+ | self.timer = setInterval(function() { | ||
+ | self.index++; | ||
+ | if( self.index == self.slides.length ) { | ||
+ | self.index = 0; | ||
+ | } | ||
+ | self._slideTo( self.index ); | ||
+ | |||
+ | }, 3000); | ||
+ | }, | ||
+ | stopStart: function() { | ||
+ | var self = this; | ||
+ | self.el.addEventListener( "mouseover", function() { | ||
+ | clearInterval( self.timer ); | ||
+ | self.timer = null; | ||
+ | |||
+ | }, false); | ||
+ | self.el.addEventListener( "mouseout", function() { | ||
+ | self.action(); | ||
+ | |||
+ | }, false); | ||
+ | } | ||
+ | |||
+ | |||
+ | }; | ||
+ | |||
+ | document.addEventListener( "DOMContentLoaded", function() { | ||
+ | |||
+ | var slider = new Slideshow( "#main-slider" ); | ||
+ | |||
+ | }); | ||
+ | |||
+ | |||
+ | })(); | ||
− | |||
− | |||
− | |||
− | + | </script> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
</style> | </style> | ||
− | |||
− | |||
<body> | <body> | ||
Line 216: | Line 197: | ||
DIYBio HK shared with us their safety protocol, biosafety practice in their lab as well as the recent situation and regulations on genetically modified organisms in Hong Kong. We gain precious inspirations from the talk on biosafety and we realized that regulations in Hong Kong need to be improved. Meeting with all other local iGEM teams, we had nice communications on difficulties we are facing respectively and gave each other suggestions. | DIYBio HK shared with us their safety protocol, biosafety practice in their lab as well as the recent situation and regulations on genetically modified organisms in Hong Kong. We gain precious inspirations from the talk on biosafety and we realized that regulations in Hong Kong need to be improved. Meeting with all other local iGEM teams, we had nice communications on difficulties we are facing respectively and gave each other suggestions. | ||
<div class="slider" id="main-slider"><!-- outermost container element --> | <div class="slider" id="main-slider"><!-- outermost container element --> | ||
− | < | + | <div class="slider-wrapper"><!-- innermost wrapper element --> |
− | + | <img src="https://static.igem.org/mediawiki/2017/d/d0/CuhkSPone.PNG" alt="First" class="slide" /><!-- slides --> | |
− | + | <img src="https://static.igem.org/mediawiki/2017/d/dd/CuhkSPtwo.PNG" alt="Second" class="slide" /> | |
− | + | <img src="https://static.igem.org/mediawiki/2017/f/fe/DIYBio.PNG" alt="Third" class="slide" /> | |
− | + | </div> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
</div> | </div> | ||
</section> | </section> |
Revision as of 09:34, 21 October 2017