Изменить изображение на свитке JS / jQuery - PullRequest
2 голосов
/ 07 марта 2020

По сути, я пытаюсь создать базовую 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 чтобы сделать две вещи ...

  1. Получить высоту прокрутки и автоматически добавить предустановленное значение (200), чтобы перейти к следующему изображению.

В настоящее время количество прокрутки, чтобы изменить изображение должно быть добавлено вручную, вот так ...

  • Как только прокрутка на 200, перейдите к изображению 2
  • Показать изображение 2 на 200> 600
  • Один раз прокрутка на 600 сменить изображение на 3
  • et c

Это заставит каждое изображение отображаться для прокрутки 200, а затем переключится на следующее изображение без необходимости добавления вручную количество прокрутки и расстояние от предыдущего изображения каждый раз.

Можно ли как-нибудь упростить код, чтобы в js не нужно было каждый раз добавлять новое изображение с идентификатором? Возможно, есть способ, которым он может подсчитать количество изображений в html с помощью класса «image», а затем автоматически добавить номер идентификатора, который добавляет 1 к предыдущему идентификатору?

Что-то вроде. .

  • Подсчитать количество изображений в html с классом «image»
  • Номер магазина (в данном случае 3)
  • Create # c1
  • Создать # c2
  • Создать # c3

  • Показать # c1 для прокрутки 200

  • Показать # c2 за свиток 200
  • Et c

спасибо!

Ответы [ 2 ]

1 голос
/ 07 марта 2020

https://jsfiddle.net/fd69ensv/1/

Добавить все изображения в массив в JS Используйте Math.floor() для округления x / 200 - это даст вам индекс изображения в ваш массив. Обновите img src при прокрутке.

1 голос
/ 07 марта 2020

это то, что вам нужно

https://jsfiddle.net/rkv88/9tqcdp61/

вычислить элемент в диапазоне imgSpaces, в данном примере это 200, используя это:

"#c" + (Math.round(pos / imgSpace) + 1)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...