Skip to content

Instantly share code, notes, and snippets.

@svlada

svlada/problem

Created July 27, 2012 08:35
Show Gist options
  • Save svlada/3186850 to your computer and use it in GitHub Desktop.
Save svlada/3186850 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
problem
<html><head></head><body>
<style type="text/css">
.clearfix:after { content: "."; visibility: hidden; display: block; height: 0; clear: both; }
.wrapper { background-color: #ccc; padding-left: 5px; }
.left-column { float: left; }
.content { float: left; }
.img {display: none;}
.active {display:block;}
</style>
<div id="wrapper">
<div class="img active">Slika 1</div>
<div class="img">Slika 2</div>
<div class="img">Slika 3</div>
</div>
<hr/>
<a href="#start" id="start">start</a> | <a href="#stop" id="stop">stop</a>
<script type="text/javascript">
function p(p) { console.log(p); }
var Slideshow = function() {
this.active=false;
this.interval = null;
this.currentSlide = 0;
this.imgNum = 0;
this.images = null;
};
Slideshow.prototype.start = function() {
var self = this;
this.images = this.getElementsByClass(document, "img");
this.imgNum = this.images.length;
if (!this.images) return;
this.active = true;
this.interval = setInterval((function(self) {
return function() { self.animate(); }
} (this)), 1000);
}
Slideshow.prototype.stop = function() {
this.active = false;
clearInterval(this.interval);
}
Slideshow.prototype.getElementsByClass = function(node, classname) {
if (node.getElementsByClassName) {
return node.getElementsByClassName(classname);
} else {
return "error";
}
}
Slideshow.prototype.animate = function() {
this.images[this.currentSlide].style.display = 'none';
this.currentSlide++;
this.currentSlide = this.currentSlide % this.imgNum;
this.images[this.currentSlide].style.display = 'block';
}
var slideshow = new Slideshow();
var controlStart = document.getElementById('start');
var controlStop = document.getElementById('stop');
controlStart.addEventListener('click', (function(slideshow) {
return function (event) {
slideshow.start();
};
} (this.slideshow)), false);
controlStop.addEventListener('click', (function(slideshow) {
return function (event) {
slideshow.stop();
};
} (this.slideshow)), false);
</script>
</body></html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment