Cycle De Par Les Divs

Nous avons besoin pour effectuer une itération un ensemble de poignée et de ses propriétés de visibilité.

Tout d'abord, permettez-moi de vous montrer deux bibliothèques que j'ai créé. La première est Iterable, qui est conçu pour gérer tous les types d'itérations:

function Iterable(params) {
var prevHandlers = [];
var nextHandlers = [];
var that = this;
this.current = params.current;
function ensureArray() {
if (!that.elements) {
that.elements = [];
} else if (!Array.isArray(that.elements)) {
that.elements = $.map(that.elements, function(value, index) {
return [value];
});
}
return that.elements;
}
function calculateCount() {
that.count = ensureArray().length;
}
this.setElements = function(elements) {
this.elements = elements;
calculateCount();
};
this.prev = function(amount) {
if (amount === undefined) {
amount = 1;
}
//Modulo twice to make sure current will be positive
that.current = (((that.current - amount) % that.count) + that.count) % that.count;
while (amount--) {
for (var prevHandler in prevHandlers) {
prevHandlers[prevHandler](params);
}
}
};
this.next = function(amount) {
if (amount === undefined) {
amount = 1;
}
that.current = (that.current + amount) % that.count;
while (amount--) {
for (var nextHandler in nextHandlers) {
nextHandlers[nextHandler](params);
}
}
};
this.getCurrent = function() {
return that.elements[that.current];
};
this.setCurrent = function(current) {
for (var index in that.elements) {
if (that.elements[index] === current) {
that.current = index;
return true;
}
}
return false;
};
this.pushElement = function(element) {
that.elements.push(element);
};
this.pushElements = function(elements) {
for (var element in elements) {
that.pushElement(elements[element]);
}
};
this.insertElement = function(element, index) {
that.elements.splice(index, 0, element);
};
this.insertElements = function(elements, indexes, leftToRight) {
var start = 0;
var end = indexes.length - 1;
if (leftToRight === false) {
var aux = start;
start = end;
end = aux;
}
var leap = (start < end) ? 1 : -1;
while (start - leap !== end) {
that.insertElement[elements[indexes[start]]];
start += leap;
}
};
this.popElement = function() {
that.elements.pop();
};
this.popElements = function(amount) {
that.elements.splice(that.elements.length - amount, amount);
};
this.removeElement = function(index) {
that.elements.splice(index, 1);
};
this.removeElements = function(indexes, leftToRight) {
var start = 0;
var end = indexes.length - 1;
if (leftToRight === false) {
var aux = start;
start = end;
end = aux;
}
var leap = (start < end) ? 1 : -1;
while (start - leap !== end) {
that.removeElement(indexes[start]);
start += leap;
}
};
this.register = {
prev: function(param) {
if (Array.isArray(param)) {
for (var func in param) {
prevHandlers.push(param[func]);
}
} else {
prevHandlers.push(param);
}
}, 
next: function(param) {
if (Array.isArray(param)) {
for (var func in param) {
nextHandlers.push(param[func]);
}
} else {
nextHandlers.push(param);
}
}
};
this.setElements(params.elements);
if ((!!this.current) && (!Array.isArray(params.elements))) {
this.setCurrent(params.elements[params.current]);
}
}

La deuxième est Visiblary, qui est conçu pour gérer tous les types de visibilité des événements:

/*
* params:
*     - selector: jQuery selector
*     - init: function which gets the Visiblary object to initialize it
*     - events: object/array
*         - root: a selector which contain all the affected tags, default is "body"
*         - types: array, which contains the string representation of the events
*         - selector: inner selector to identify the target set
*         - handler: handler function
*/
function Visiblary(params) {
var instance = this;
if (!params.toggleClass) {
params.toggleClass = "invisible";
}
this.hideAll = function() {
$(params.selector).addClass(params.toggleClass);
return instance;
};
this.hideSubset = function(subsetSelector) {
$(params.selector).filter(subsetSelector).addClass(params.toggleClass);
return instance;
};
this.hideOnly = function(subsetSelector) {
$(params.selector).not(subsetSelector).removeClass(params.toggleClass);
$(params.selector).filter(subsetSelector).addClass(params.toggleClass);
return instance;
};
this.showAll = function() {
$(params.selector).removeClass(params.toggleClass);
return instance;
};
this.showSubset = function(subsetSelector) {
$(params.selector).filter(subsetSelector).removeClass(params.toggleClass);
return instance;
};
this.showOnly = function(subsetSelector) {
$(params.selector).not(subsetSelector).addClass(params.toggleClass);
$(params.selector).filter(subsetSelector).removeClass(params.toggleClass);
return instance;
};
this.invert = function() {
$(params.selector).each(function() {
$(this).hasClass(params.toggleClass) ? $(this).removeClass(params.toggleClass) : $(this).addClass(params.toggleClass);
});
return instance;
};
if (!!params.init) {
params.init(this);
}
if (!!params.events) {
for (var event in params.events) {
$(!!params.events[event].root ? params.events[event].root : "body").on(params.events[event].types.join(" "), params.events[event].selector, params.events[event].handler);
}
}
return instance;
}

Et, en supposant que l'on utilise ces outils et les sept éléments sont déjà créés, c'est le script qui résout le problème:

var myVisiblary = new Visiblary({
selector: "#content-1, #content-2, #content-3, #content-4, #content-5, #content-6, #content-7"
});
myVisiblary.showOnly("#content-1");
var myIterable = new Iterable({
elements: $("#content-1, #content-2, #content-3, #content-4, #content-5, #content-6, #content-7"),
current: 0
});
myIterable.register.next(function() {myVisiblary.showOnly($(myIterable.getCurrent()))});
setInterval(function(){ myIterable.next(); }, 5000);

OriginalL'auteur Lajos Arpad