滑块和带有图像的 Ajax

Question

我的页面上有一个幻灯片，其中的图片会在一段时间后更改。幻灯片一开始效果很好，直到我输入 JSON。现在我只能看到第一张图片，但它们没有改变。有什么想法吗？

https://jsfiddle.net/j2qoyk13/ 有一个 fiddle 但由于链接和所有内容都在本地主机上，它可能没用。您仍然可以看到代码。

这是给懒人的:)

[
  {
    "src" : "./images/slide-1.png",
    "alt" : "Slide one"
  },
  {
    "src" : "./images/slide-2.png",
    "alt" : "Slide two"
  },
  {
    "src" : "./images/slide-3.png",
    "alt" : "Slide three"
  },
  {
    "src" : "./images/slide-4.png",
    "alt" : "Slide four"
  }
]

//slide show
  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;
              }
          }, 500);
  }

  //Json
  var image = $('.sidenav li > img');
  $.getJSON('http://localhost:8080/data.json', function(result){
    $.each(result, function(i, field){

        for (i=0 ; i < image.length ; i++) {
          image.attr('src', field.src);
          image.attr('alt', field.alt);
        }
    });
  });

<section class="section-slider">
    <div class="wrapper">
      <div class="content">
        <div class="inner-cont">
          <div class="title">
            <h1 class="black title-section">EXPECT NOTHING ORDINARY</h1>
          </div>
          <p class="txt black">
            Eastern & Oriental Plc is an AIM quoted real estate company, headquartered in the United Kingdom and focused on the development of residential and mixed-use assets in the London and the South East of England.
          </p>
          <div class="bot-link">
            <a href="javascript:;">VIEW OUR COMPANY PROFILE<span class="s s-right_arrow"></span></a>
          </div>
          <div class="anchor-sign">
            <a class="anchor-link" href="#s-three"><span class="s s-download-arrow"></span></a>
          </div>
        </div>
      </div>
      <div class="slider">
        <ul class="sidenav">
          <li class="selected"><img src="" alt="Slide one"></li>
          <li><img src="" alt="Slide two"></li>
          <li ><img src="" alt="Slide three"></li>
          <li><img src="" alt="Slide four"></li>
        </ul>
      </div>
    </div>
  </section>

问题当然是，为什么我添加 JSON 后幻灯片现在没有变化？

Answer 1

将您的 JSON 循环逻辑更新为此

$.getJSON('http://localhost:8080/data.json', function(result){

    var i = 0;
    $('.sidenav li').each(function(e){
        $(this).find('img').attr('src',result[i].src);
        $(this).find('img').attr('alt',result[i].alt);
        i++;
    });  

});

滑块和带有图像的 Ajax

slider and Ajax with images

html

css

ajax

json

slideshow