Блог

Во-первых, я только начал изучать HTML, CSS и JS, и в настоящее время я учусь сам!(итак, я новичок!)

Теперь я создал полноэкранный фейдер изображения с помощью jQuery и столкнулся с 2 небольшими проблемами.

1) Фейдер показывает (img 1), затем он снова исчезает до (img 1), а затем исчезает до (img 2) (img 3) (img 4) и обратно до (img 1). Но я ищу простое (изображение 1)> (изображение 2)> (изображение 3)> (изображение 4)> (изображение 1) вращение.

2) В то время как (изображение 1) переходит в (изображение 2) появляется короткая, но очень яркая белая вспышка, и я хочу изменить ее на более тонкую черную вспышку или даже сразу изменить ее на следующую (изображение)!

Спасибо за чтение, я надеюсь, что вы меня понимаете, я не могу объяснить это яснее, так как у меня нет опыта (пока).

Вот код, который я использовал!

     $(document).ready(function functionName() {

    var count = 0;
    var images = ["slider1","slider2","slider3","slider4"];
    var image = $(".fader");

    image.css("background-image","url(" images[count] ")");

    setInterval(function(){
    image.fadeOut(500, function(){
    image.css("background-image","url(" images[count  ] ")");
    image.fadeIn(500);
    });
    if(count == images.length)
    {
    count = 0;
    }

    },10000);

    });
  

Первая проблема заключается в том, что вы фактически загружаете первое изображение дважды. Вы устанавливаете count 0 и устанавливаете фоновое изображение. Затем в вашем цикле первое, что происходит, это то, что он снова устанавливает фоновое изображение на изображение 0 , а затем увеличивает count его на 1 (вы используете оператор post-increment ). Если вы хотите сначала увеличить, используйте оператор предварительного увеличения ( count ) . Но вам нужно быть осторожным, так как это изменит вашу проверку, чтобы увидеть, когда count выходит за пределы длины массива изображений.

Я не могу быть на 100% уверен в том, что вызывает вспышку, но я предполагаю, что, поскольку вы используете тот же элемент и просто устанавливаете фоновое изображение, когда вы заменяете первое изображение вторым изображением, для его загрузки требуется секунда, поэтому вы видите фон для этогопериод времени. Как только вы просмотрите все изображения, они будут в памяти, поэтому вы больше не увидите вспышку. Исправление для этого состоит в том, чтобы либо предварительно загрузить все изображения, либо загрузить следующее изображение в элементе и поместить его поверх старого изображения, а затем затушевать его.

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

Редактировать

Давайте просто упростим это, поскольку у вас уже есть основы. Вот некоторый обновленный код:

 $(document).ready(function functionName () {
    var count = 0;
    var images = ["slider1","slider2","slider3","slider4"];
    var image = $(".fader");

    image.css("background-image","url(" images[count] ")");
    var count = 1;

    setInterval(function () {
        image.fadeOut(500, function () {
            image.css("background-image","url(" images[count  ] ")");
            image.fadeIn(500);
        });
        if (count == images.length) {
            count = 0;
        }
    }, 10000);
});
  

Единственное изменение, которое я внес, — это установить count значение 1 после установки первого изображения; таким образом, когда начнется интервал, он начнется с 1 , но вернется к 0 нему, когда он дойдет до конца.

Что касается вашего комментария о белой вспышке, да, скорее всего, это тот факт, что фон белый, и вы опускаетесь до 0 и снова возвращаетесь. Если вы хотите меньше вспышки, вы можете изменить цвет фона div на черный или средне-серый или что-то в этом роде. Если вы хотите полностью избавиться от него, вам нужно будет перейти к другой стратегии, при которой у вас есть второе изображение, которое накладывается поверх первого, новое исчезает, а затем нижнее может быть удалено, а другое новое может быть добавлено поверх второгоодин. Вы всегда переходите от одного изображения к другому, а не от изображения к нулю и обратно.