Почему моя функция setInterval не работает? - Новичок

Question

Я немного начинаю, когда речь идет о Javascript, и используя примеры, представленные на этом веб-сайте, я собрал простой код, который я могу понять, но не смог получить работу. Я был бы очень благодарен, если бы кто-нибудь мог указать, где я ошибся, и/или объяснить, почему он нуждается в полной капитальной ремонте, если это необходимо.

Моя цель состоит в том, чтобы иметь 3 изображения в «карусели», которые изменяются через 4 секунды с постепенным исчезновением/исчезновением. Я смог достичь этого раньше, но без возможности сделать его циклом.

$(document).ready(function() { 

    setInterval(function() { 
     num = (num + 1) % 3; 
    }, 4000); 

    if(num > 3) { 
     num = 1; 
    } 

    if(num = 1) { 
     $(".carousel #slide-1").fadeIn(); 
     $(".carousel #slide-2").fadeOut(); 
     $(".carousel #slide-3").fadeOut(); 
    } 
    if(num = 2) { 
     $(".carousel #slide-1").fadeOut(); 
     $(".carousel #slide-2").fadeIn(); 
     $(".carousel #slide-3").fadeOut(); 
    } 
    if(num = 3) { 
     $(".carousel #slide-1").fadeOut(); 
     $(".carousel #slide-2").fadeOut(); 
     $(".carousel #slide-3").fadeIn(); 
    } 
}); 

Answer 1

$(document).ready() пожары один раз. Он делает то, что находится в вашем закрытии, затем выходит и никогда не возвращается. И ваш setInterval() просто зацикливает значение num, остальная часть кода больше не выполняется.

Проверьте, пожалуйста, код. Я не подвергаю сомнению идею сейчас, только что изменил его так, как это будет работать:

$(document).ready(function() { 
    var num = 0; 
    var action = function() { 
     if(num == 0) { // note the comparison: it's ==, not = 
      $(".carousel #slide-1").fadeIn(); 
      $(".carousel #slide-2").fadeOut(); 
      $(".carousel #slide-3").fadeOut(); 
     } else if(num == 1) { 
      $(".carousel #slide-1").fadeOut(); 
      $(".carousel #slide-2").fadeIn(); 
      $(".carousel #slide-3").fadeOut(); 
     } else if(num == 2) { 
      $(".carousel #slide-1").fadeOut(); 
      $(".carousel #slide-2").fadeOut(); 
      $(".carousel #slide-3").fadeIn(); 
     }  
     num = (num + 1) % 3; 
    }; 

    setInterval(action, 4000); 
    action(); 
}); 

Answer 2

повторяющаяся функция ничего не делает больше, чем езда на велосипеде через числовые значения в данный момент, так как код для настройки элементов DOM является вне этого.

Вы должны двигаться все кода внутри повторяющейся функции, что-то вроде:

$(document).ready(function() { 
    var num = 0; 
    setInterval(function() { 
     num = (num + 1) % 3; 
     if(num == 0) { 
      $(".carousel #slide-1").fadeIn(); 
      $(".carousel #slide-2").fadeOut(); 
      $(".carousel #slide-3").fadeOut(); 
      return; 
     } 
     if(num == 1) { 
      $(".carousel #slide-1").fadeOut(); 
      $(".carousel #slide-2").fadeIn(); 
      $(".carousel #slide-3").fadeOut(); 
      return; 
     } 
     if(num == 2) { 
      $(".carousel #slide-1").fadeOut(); 
      $(".carousel #slide-2").fadeOut(); 
      $(".carousel #slide-3").fadeIn(); 
     } 
    }, 4000); 
}); 

Вы заметите некоторые других изменений, которые я сделал, а также, надеюсь, я поймал все но могут быть и другие:

• Инициализировать переменную num.
• Проверка равенства не производится с помощью =, но с == или ===.
• заявление num = (num + 1) % 3; уже проходит через {0, 1, 2}, поэтому нет необходимости в других проверках.
• if заявления были изменены для использования {0,1,2}, а не {1,2,3}.
• return был добавлен в первые два блока if, так как нет необходимости продолжать, как только вы выбрали один из них.

Answer 3

Не повторять себя:

$(document).ready(function() { 
    var num = 0; 
    var action = function() { 
     $(".carousel #slide-" + (num % 3) + 1).fadeIn(); 
     $(".carousel #slide-" + ((num + 1) % 3) + 1).fadeOut(); 
     $(".carousel #slide-" + ((num + 2) % 3) + 1).fadeOut(); 
     num = (num + 1); 
    }; 
    setInterval(action, 4000); 
    action(); 
}); 

Или, еще лучше:

$(document).ready(function() { 
    var slides = [ 
     $(".carousel #slide-1"), 
     $(".carousel #slide-2"), 
     $(".carousel #slide-3") 
    ]; 
    var action = function() { 
     slides[0].fadeIn(); 
     slides[1].fadeOut(); 
     slides[2].fadeOut(); 
     slides.push(slides.shift()); 
    }; 
    setInterval(action, 4000); 
    action(); 
}); 

И моя последняя мысль:

$(document).ready(function() { 
    var slides = [].slice.call(document.querySelectorAll('.carousel [id^="slide-"]')); 
    var action = function() { 
     slides[0].fadeOut(); 
     slides[1].fadeIn(); 
     slides.push(slides.shift()); 
    }; 
    setInterval(action, 4000); 
    slides.reduce(function(ignore, slide) { // fade out all slides after the first 
     slide.fadeOut(); 
    }); 
    slide[0].fadeIn(); // fade in the first 
}); 

Answer 4

Не h Код ard. Пусть это будет динамично. Этот код будет адаптироваться к любому числу дочерних изображений под .carousel.

jQuery(function($) { 
 
    var imgs = $('.carousel > img'), 
 
     cur = 0; 
 
    
 
    imgs.slice(1).hide(); 
 
    
 
    setInterval(function() { 
 
    var hidden = cur; 
 
    
 
    if (++cur >= imgs.length) 
 
     cur = 0; 
 
    
 
    if (hidden !== cur) { 
 
     imgs.eq(hidden).fadeOut(); 
 
     imgs.eq(cur).fadeIn(); 
 
    } 
 
    }, 4000); 
 
});

.carousel { 
 
    position: relative; 
 
} 
 

 
.carousel > img { 
 
    position: absolute; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="carousel"> 
 
    <img src="//placehold.it/200x100&text=1"> 
 
    <img src="//placehold.it/200x100&text=2"> 
 
    <img src="//placehold.it/200x100&text=3"> 
 
</div>

EDIT: обновляется только коснуться элемента замирания в и элемент гаснуть.

EDIT: исправлена ​​ошибка исчезновения, которая произошла, если есть одно изображение.