Chúng tôi cần lặp lại bộ và xử lý hiển thị của nó es.
Trước hết, hãy để tôi chỉ cho bạn hai thư viện mà tôi đã tạo. Đầu tiên là Iterable, được thiết kế để xử lý tất cả các loại lặp:
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]);
}
}
Thứ hai là Visiblary, được thiết kế để xử lý tất cả các loại sự kiện visibility:
/*
* 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;
}
Và, giả sử một trong những sử dụng các công cụ này và bảy yếu tố đã được tạo, đây là tập lệnh giải quyết vấn đề:
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);
Cảm ơn bạn rất nhiều! Điều đó thật tuyệt! Tôi chỉ có 2 câu hỏi khác mà hy vọng không phải là một vấn đề lớn để thực hiện.1) Có thể thêm thứ gì đó khiến cho hoạt ảnh tạm dừng khi bạn di chuột qua div không? và 2) Làm thế nào tôi có thể làm cho nó như vậy bất cứ điều gì div tôi đang được giao một lớp học? Tôi có một số phong cách mà tôi muốn áp dụng cho div hiện tại. Cảm ơn một lần nữa! – user1163942
làm cho nó tạm dừng khi bạn di chuột sẽ tham gia nhiều hơn một chút, nhưng [đây là bản cập nhật] (http://jsfiddle.net/eFjnU/2/) để thêm/xóa lớp khi bạn di chuột. –
@ Si8: Tôi nghĩ rằng nó sạch hơn một chút mà không cần sử dụng các chỉ mục. https://jsfiddle.net/egLefjwv/11/ Yours không xử lý trường hợp '++' sẽ đưa chỉ mục ra ngoài chỉ mục cuối cùng của phần tử. Để khắc phục nó, bạn có thể lấy phần còn lại của phân chia bằng 'vAlertLen', nó sẽ đưa nó trở về' 0' khi chỉ số bằng với độ dài, và sau đó thực hiện gia tăng. '(vCurrentDispItem% vAlertLen + 1)' Tôi sẽ cho phép bạn lấy nó từ đó với các hình động. Chúc may mắn! –