Question

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

Answer 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);
    }

动态生成的幻灯片错误

1 个答案: