По сути, я пытаюсь создать базовую c функцию, которая перелистывает изображения при прокрутке.
У меня все есть в jsfiddle: https://jsfiddle.net/JUST_RJ/6zb37d94/
$(document).ready(function() {
$("#c1").fadeIn(0);
console.log()
$(window).scroll(function() {
var pos = $(document).scrollTop();
if (pos < 200) {
hideAll("c1");
$("#c1").fadeIn(0);
}
if (pos > 200 && pos < 400) {
hideAll("c2");
$("#c2").fadeIn(0);
}
if (pos > 400 && pos < 600) {
hideAll("c3");
$("#c3").fadeIn(0);
}
});
function hideAll(exceptMe) {
$(".image").each(function(i) {
if ($(this).attr("id") == exceptMe) return;
$(this).fadeOut(0);
});
}
});
Прямо сейчас у меня это работает, хотя я думаю, что это будет сложно при добавлении большего количества изображений. Я хочу сохранить изображение sr c в списке html, чтобы можно было легко добавить новое изображение и вручную выбрать размер изображения.
Мне интересно, можно ли упростить часть JS чтобы сделать две вещи ...
- Получить высоту прокрутки и автоматически добавить предустановленное значение (200), чтобы перейти к следующему изображению.
В настоящее время количество прокрутки, чтобы изменить изображение должно быть добавлено вручную, вот так ...
- Как только прокрутка на 200, перейдите к изображению 2
- Показать изображение 2 на 200> 600
- Один раз прокрутка на 600 сменить изображение на 3
- et c
Это заставит каждое изображение отображаться для прокрутки 200, а затем переключится на следующее изображение без необходимости добавления вручную количество прокрутки и расстояние от предыдущего изображения каждый раз.
Можно ли как-нибудь упростить код, чтобы в js не нужно было каждый раз добавлять новое изображение с идентификатором? Возможно, есть способ, которым он может подсчитать количество изображений в html с помощью класса «image», а затем автоматически добавить номер идентификатора, который добавляет 1 к предыдущему идентификатору?
Что-то вроде. .
спасибо!