Слайд-шоу исчезают эффект рывков

Мой слайдер изображений работает, за исключением первого поворота изображений, одно изображение дергается. На следующих проходах гладко?

код JavaScript.

var imgArray = [
   'about.jpg',
   'about2.jpg',
   'about3.jpg'],
   curIndex = 0;
   imgDuration = 5000;

function slideShow() {
   document.getElementById('slider').className += "fadeOut";
   setTimeout(function() {
       document.getElementById('slider').src = imgArray[curIndex];
       document.getElementById('slider').className = "";
   },1000);
   curIndex++;
   if (curIndex == imgArray.length) { curIndex = 0; }
      setTimeout(slideShow, imgDuration);
}
slideShow();

код CSS.

#slider {
   opacity:1;
   transition: opacity 1s;
   float:left;
   max-width:100%;
   height:auto;
   margin-right:20px;
   border-radius:4px 4px 4px 4px;
   border-color:#CCC;
   border-style:ridge;
   border-width:2px; 
}

#slider.fadeOut {
   opacity:0;
}

мой сайт.
Посмотреть эффект на моем сайте

Это единственный вовлеченный html.

img id="slider" src="images/other-images/blank.jpg"

Вы можете просмотреть сайт с вашим кодом на месте.
Испытательный Полигон

1 ответ

  1. Это происходит из-за загрузки изображения.

    Вы можете создать плагин jquery, как показано ниже:

    $.fn.preload = function() {
        this.each(function(){
            $('<img/>')[0].src = this;
        });
    }
    
    $(['about.jpg','about2.jpg','about3.jpg']).preload();
    

    Таким образом, ваш код будет выглядеть так:

    $.fn.preload = function() {
        this.each(function(){
            $('<img/>')[0].src = this;
        });
    }
    
    var imgArray = [
    'about.jpg',
    'about2.jpg',
    'about3.jpg'],
    curIndex = 0;
    imgDuration = 5000;
    
    imgArray.preload();
    
    function slideShow() {
        document.getElementById('slider').className += "fadeOut";
        setTimeout(function() {
            document.getElementById('slider').src = imgArray[curIndex];
            document.getElementById('slider').className = "";
        },1000);
        curIndex++;
        if (curIndex == imgArray.length) { curIndex = 0; }
        setTimeout(slideShow, imgDuration);
    }
    slideShow();
    

    Iv’E не протестирован, но это показывает, что вам нужно сначала загрузить изображения.

    Одна библиотека, которую я люблю использовать, — это Owl Carousel, которая очень проста в настройке и использовании https://owlcarousel2.github.io/OwlCarousel2/

    Редактировать
    Просто убедитесь, что вы правильно ссылаетесь на изображения в:

    var imgArray = [
    'about.jpg',
    'about2.jpg',
    'about3.jpg']
    

    так что это может быть:

    var imgArray = [
    '/path/to/about.jpg',
    '/path/to/about2.jpg',
    '/path/to/about3.jpg']