@emelyanovk

Пожалуйста, напишите дизайнеру мелкий скриптик (Scroll Event)?

Помогите пожалуйста!

Механика следующая:
По центру экрана размещена картинка.
При скролле, по порядку, ее сменяют другие картинки из папки "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. Нет счетчика

Огромное спасибо!
  • Вопрос задан
  • 2441 просмотр
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы