Помогите пожалуйста!
Механика следующая:
По центру экрана размещена картинка.
При скролле, по порядку, ее сменяют другие картинки из папки "slides".
В углу висит счетчик отображающий номер актуальной картинки.
Удалось отрыть вот такой код:
$(function() {
var doc = $(document),
bodyElem = $('body'),
backgroundElem = $("#background"),
entry = $('.entry'),
activeElem,
background,
backgroundImageCount = bodyElem.data('background-image-count');
// Preload Background Images
entry.each(function() {
var backgroundPrefix = $(this).data('background-prefix');
if (!backgroundPrefix)
{
return;
}
for (var i = 1; i <= backgroundImageCount; i++)
{
$('<img/>')[0].src = "slides/" + backgroundPrefix + i + ".jpg";
}
});
$(window).scroll(function(e) {
entry.each(function() {
var scrollTop = $(this).position().top - doc.scrollTop();
if (scrollTop < 0)
{
activeElem = $(this);
}
});
var backgroundPrefix = activeElem.data('background-prefix');
if (!backgroundPrefix)
{
return;
}
var scrollTop = doc.scrollTop() - activeElem.position().top;
var backgroundSectionHeight = entry.outerHeight() / backgroundImageCount;
var backgroundNumber = Math.min(backgroundImageCount, Math.floor(scrollTop / backgroundSectionHeight) + 1);
var background = "slides/" + activeElem.data('background-prefix') + backgroundNumber + ".jpg";
if (background != backgroundElem.attr('src'))
{
backgroundElem.attr('src', background);
}
});
});
Он работает, но есть недостатки:
1. Высота скролла не распределяется между картинками.
2. Нет счетчика
Огромное спасибо!