Динамически генерируемая ошибка слайд-шоу - PullRequest
Новая
       38

Динамически генерируемая ошибка слайд-шоу

0 голосов
/ 27 ноября 2018

У меня есть слайд-шоу, которое берет источники изображений из JSON и генерирует список для количества изображений.Это код: 

//Json
  var sidenav = $('.sidenav');

  $.getJSON('http://localhost:8080/data.json', function(result){
    for (var i = 0 ; i < result.length ; i++) {
      sidenav.append(`<li class="selected"><img src="${result[i].src}" alt="${result[i].alt}"></li>`);

      var slides = $('.sidenav li');
      var slideIndex = 0;
      var slideTime = animate();

      slideTo(slides[0]);

      slides.click(function() {
      clearInterval(slideTime);
      slideTime = animate();

      var selectedIndex = $(this).index();
      var slide = slides[selectedIndex];
      slideTo(slide);

      });
    }

    function slideTo(slide) {
      slides.removeClass("selected");
      $(slide).addClass("selected");
      slideIndex = jQuery(slide).index();
    }

    function animate() {
      return setInterval(function() {
        var slide = slides[slideIndex];
        slideTo(slide)
        slideIndex++;
        if (slideIndex == slides.length) {
          slideIndex = 0;
        }
      },3000);
    }

     <div class="slider">
        <ul class="sidenav">

        </ul>
      </div>

CSS повсюду, но не очень важен здесь.Это работает, когда он получает первый элемент li и добавляет класс selected.Но чем-то он почему-то прыгает до последнего и оттуда не двигается.Я чувствую, что пропустил что-то маленькое, но важное .. Есть мнения?

1 Ответ

0 голосов
/ 27 ноября 2018

ОК. Ответ был в том, чтобы переместить часть, в которой слайды изменились, из цикла for. 

var sidenav = $('.sidenav');

  $.getJSON('http://localhost:8080/data.json', function(result){
    for (var i = 0 ; i < result.length ; i++) {
      sidenav.append(`<li class="selected"><img src="${result[i].src}" alt="${result[i].alt}"></li>`);
    }

    var slides = $('.sidenav li');
    var slideIndex = 0;
    var slideTime = animate();

    slideTo(slides[0]);

    slides.click(function() {
      clearInterval(slideTime);
      slideTime = animate();

      var selectedIndex = $(this).index();
      var slide = slides[selectedIndex];
      slideTo(slide);

      });

    function slideTo(slide) {
      slides.removeClass("selected");
      $(slide).addClass("selected");
      slideIndex = jQuery(slide).index();
    }

    function animate() {
      return setInterval(function() {
        var slide = slides[slideIndex];
        slideTo(slide)
        slideIndex++;
        if (slideIndex == slides.length) {
          slideIndex = 0;
        }
      },3000);
    }
...