Difference between revisions of "Team:Hong Kong-CUHK/Engagement"

Line 1: Line 1:
−
<!DOCTYPE html>
 
 
<html>
 
<html>
−
<title>W3.CSS</title>
+
<div class="slider" id="main-slider"><!-- outermost container element -->
−
<meta name="viewport" content="width=device-width, initial-scale=1">
+
<div class="slider-wrapper"><!-- innermost wrapper element -->
−
<link rel="stylesheet" href="https://2017.igem.org/wiki/index.php?title=Template%3AHong_Kong-CUHK_Style%2FCSS&action">
+
<img src="https://static.igem.org/mediawiki/2017/d/d0/CuhkSPone.PNG" alt="First" class="slide" /><!-- slides -->
−
<body>
+
<img src="http://lorempixel.com/1024/400/business" alt="Second" class="slide" />
 +
<img src="http://lorempixel.com/1024/400/city" alt="Third" class="slide" />
 +
</div>
 +
</div>
 +
<style>
 +
html,body {
 +
margin: 0;
 +
padding: 0;
 +
}
 +
.slider {
 +
width: 1024px;
 +
margin: 2em auto;
 +
 +
}
  
−
<h2 class="w3-center">Manual Slideshow</h2>
+
.slider-wrapper {
 +
width: 100%;
 +
height: 400px;
 +
position: relative;
 +
}
  
−
<div class="w3-content w3-display-container">
+
.slide {
−
  <img class="mySlides" src="https://static.igem.org/mediawiki/2017/7/74/Daycamp.PNG" style="width:100%">
+
float: left;
−
  <img class="mySlides" src="https://static.igem.org/mediawiki/2017/d/dd/CuhkSPtwo.PNG" style="width:100%">
+
position: absolute;
−
  <img class="mySlides" src="img_mountains.jpg" style="width:100%">
+
width: 100%;
−
  <img class="mySlides" src="img_forest.jpg" style="width:100%">
+
height: 100%;
−
 
+
opacity: 0;
−
  <button>&#10094;</button>
+
transition: opacity 3s linear;
−
  <button>&#10095;</button>
+
−
</div>
+
−
 
+
−
<script>
+
−
var slideIndex = 1;
+
−
showDivs(slideIndex);
+
−
 
+
−
function plusDivs(n) {
+
−
  showDivs(slideIndex += n);
+
 
}
 
}
  
−
function showDivs(n) {
+
.slider-wrapper > .slide:first-child {
−
  var i;
+
opacity: 1;
−
  var x = document.getElementsByClassName("mySlides");
+
−
  if (n > x.length) {slideIndex = 1}   
+
−
  if (n < 1) {slideIndex = x.length}
+
−
  for (i = 0; i < x.length; i++) {
+
−
    x[i].style.display = "none"; 
+
−
  }
+
−
  x[slideIndex-1].style.display = "block";
+
 
}
 
}
−
</script>
+
</style>
 +
<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" );
 +
 +
});
 +
 +
 +
})();
  
−
</body>
+
</script>
 
</html>
 
</html>

Revision as of 08:32, 16 October 2017

First Second Third