动态生成的幻灯片错误答案

【问题标题】：Dynamically generated slideshow bug动态生成的幻灯片错误
【发布时间】：2019-04-28 22:54:04
【问题描述】：

我有一个幻灯片，它从 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 。但是由于某种原因，它会跳到最后一个并且不会从那里移动。我觉得我错过了一些小而重要的事情.. 有什么意见吗？

【问题讨论】：

标签： javascript jquery html slideshow slide

【解决方案1】：

好的，答案是将幻灯片更改的部分移出 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);
    }

【讨论】：