OOP-oriented Javascript slideshow
.slideshow, .slideshow li, .slideshow figure {margin:0; padding:0;}
.slideshow li {display:none; position:relative;}
.slideshow li.current {display:block; border:2px black solid; }
.slideshow li figcaption {position:absolute; top:50%; left:0;}
function Slideshow (options) {
self = this;
//:Arguments
self.element = options.element;
self.items = options.items;
self.speed = options.speed;
//:Public variables (constants)
self.total = self.items.length;
//:Actions on load
self.initialize();
//:Event handlers
self.element.on('click', function(e) {
self.moveToNext();
});
//:Registering custom events
$.event.trigger({type:"nextSlide"});
//:Private methods
this.getCurrent = function() {
var curNum = this.items.filter('.current');
return curNum;
};
}
//:Public methods
Slideshow.prototype = {
//refer to public variables from Slideshow as `self.variable`
//refer to other public methods as `this.method()`
//refer to private methods as `self.method()`
constructor: Slideshow,
setCurrent:function (desiredNumber) {
var item = self.getCurrent();
item.removeClass('current');
self.items.filter(':eq(' + (desiredNumber - 1) + ')').addClass('current');
// this.currentNumber = desiredNumber;
},
getCurrentNumber:function () {
var current = self.getCurrent();
//index() argument is a separate DOM element referred to by a variable
var Cur = self.items.index(current);
return Cur + 1;
},
getCurrentDescription:function () {
var current = self.getCurrent();
var desc = current.find('figcaption').text();
return desc;
},
startSlideshow:function () {
this.moveToNext();
slideShowInterval = setInterval(this.moveToNext, self.speed);
},
pauseSlideshow:function () {
pauseInterval = clearInterval(slideShowInterval);
console.log('paused');
},
moveToNext:function () {
var item = self.getCurrent();
var itemlast = self.items.last();
if (item.is(itemlast)) {
item.removeClass('current');
self.items.first().addClass('current');
} else {
item.removeClass('current').next().addClass('current');
}
$(document).trigger("nextSlide");
// $('.currentNumber span').html(this.getCurrentNumber);
},
initialize:function () {
self.element.addClass('slideshow');
self.items.first().addClass('current');
}
};
jQuery(document).ready(function ($) {
//Making it reel
slideshow350 = new Slideshow ({
element:$('.slides350'),
items:$('li'),
speed:3000
});
$('.slides350').after('<br><button id="startSlideshow">Start</button>').after('<br><output class="currentNumber">Current: <span></span></output>').after('<br><output class="total" />').after('<input id="setCurrent" type="number" size="2"/>');
$('.currentNumber span').html(slideshow350.getCurrentNumber);
$('.total').html('Total: ' + slideshow350.total);
$('.slides350').on('click',function() {
$('.currentNumber span').html(slideshow350.getCurrentNumber);
});
$('#setCurrent').on('keydown',function(event){
if (event.which == 13) {
var desiredNum = $(this).val();
slideshow350.setCurrent(desiredNum);
}
});
var slideshowpaused = true;
$('#startSlideshow').on('click',function() {
if (slideshowpaused) {
slideshow350.startSlideshow();
$(this).text('Pause');
slideshowpaused = false;
} else {
slideshow350.pauseSlideshow();
$(this).text('Continue');
slideshowpaused = true;
}
});
$(document).on("nextSlide", function() {
var number = slideshow350.getCurrentNumber();
var desc = slideshow350.getCurrentDescription();
$('.currentNumber span').html(number+"("+desc+")");
});
});
<!-- http://jsbin.com/eqiliv/4/edit -->
<ul class="slides350">
<li>
<figure>
<img src="http://placehold.it/350x150/E8117F" alt="">
<figcaption>Cupiditate, repudiandae!</figcaption>
</figure>
</li>
<li>
<figure>
<img src="http://placehold.it/350x150/ff0000" alt="">
<figcaption>Fugiat, a.</figcaption>
</figure>
</li>
<li>
<figure>
<img src="http://placehold.it/350x150/AAAAAA" alt="">
<figcaption>Distinctio, dignissimos.</figcaption>
</figure>
</li>
<li>
<figure>
<img src="http://placehold.it/350x150/FAB41E" alt="">
<figcaption>Hic, deleniti!</figcaption>
</figure>
</li>
<li>
<figure>
<img src="http://placehold.it/350x150/153D4D" alt="">
<figcaption>Commodi, perferendis!</figcaption>
</figure>
</li>
</ul>