Question

我正在伸出手去看看我是否能得到一个我遇到麻烦的json文件的答案。我正在边缘动画制作幻灯片，我正在使用json文件将一些图像插入一些占位符（符号化div），我每8秒动画一次。或者。我尝试从我看过的教程中获取此信息，但我无法设置应该是的json文件。当我在浏览器中预览幻灯片时，我的图像不会加载到占位符中，我看到的是根据动画移动的灰色框。我最好的猜测是我的json文件不正确，这就是为什么它没有将图像链接到占位符。这是我的代码：

var imageArray = new Array();
var currentImage = 0;
var s = sym.getSymbol ("slider_Sym_A");
sym.$("Sample Slide").html("");

$.getJSON("LineA.json", function(data) {
   for(var i=0; i<data.length; i++){
      imageArray.push({"image":data[i].image, "title":data[i].title});

    }
    sym.$("Sample Slide").html(imageArray[currentImage].title);
    s.$("ImageHolderOne1") .css({"background-image":"url('"+imageArray[currentImage].image+"')"});
    s.play("Rest");
});

sym.grabNewImage = function(){
    currentImage++;
    if (currentImage>7){
        currentImage = 0;
}
     s.$("ImageHolderTwo1") .css({"background-image":"url('"+imageArray[currentImage].image+"')"});
}

sym.setOldImage = function(){
   s.$("ImageHolderOne1") .css({"background-image":"url('"+imageArray[currentImage].image+"')"});
   setTimeout(function() {
     s.play("Rest");
   }, 500);
}

JSON：

[
  {
"image":"PhotoA.gif",
"title":"Re - Stage"
  },
  {
"image":"PhotoA_1.gif",
"title":"ABDC"
  },
  {
"image":"PhotoA_2.gif",
"title":"W - Stage"
  },
  {
"image":"PhotoA_3.gif",
"title":"C - Stage"
  },
 {
"image":"PhotoA_4.gif",
"title":"Riser"
  },
  {
"image":"PhotoA_5.gif",
"title":"Sign"
  },
  {
"image":"PhotoA_6.gif",
"title":"X - Stage"
  },
  {
"image":"PhotoA_7.gif",
"title":"Jason"
  }
]

我感谢任何给我任何意见的人。与此同时，我将继续尝试围绕这一点。

Answer 1

我稍微修改了你的代码以使用正确的选择器（并最小化冗余代码）

见下文（提示：很多与选择器有关）

＆＃13;

var jsonData = [{
  "image": "http://placehold.it/400x200",
  "title": "Re - Stage"
}, {
  "image": "http://placehold.it/400x200",
  "title": "ABDC"
}, {
  "image": "http://placehold.it/400x200",
  "title": "W - Stage"
}, {
  "image": "http://placehold.it/400x200",
  "title": "C - Stage"
}, {
  "image": "http://placehold.it/400x200",
  "title": "Riser"
}, {
  "image": "http://placehold.it/400x200",
  "title": "Sign"
}, {
  "image": "http://placehold.it/400x200",
  "title": "X - Stage"
}, {
  "image": "http://placehold.it/400x200",
  "title": "Jason"
}];

// keeps track of image currently on display
var currentImage = 0;

// Displays next image in JSON array until at last image of array
// if already at the last image, resets to display first image
var slideNext = function() {
  if (currentImage >= jsonData.length) {
    currentImage = 0;
  }

  var imgTitle = jsonData[currentImage].title;

  $("#imageSlider").find('h1').html(imgTitle);
  $("#imageSlider").find('img').attr('src', jsonData[currentImage].image + '?text=' + imgTitle);
  currentImage++;
};

// event handler for button (to display next image manually)
$("#next").on('click', function() {
  slideNext();
});

// every interval, display next image automatically
setInterval(function() {
  slideNext();
}, 3 * 1000); // time is in milliseconds so 3 * 1000 = 3 seconds

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="imageSlider">
  <h1>Image title</h1>
  <img src="" />
</div>
<button id="next">Next</button>

＆＃13;

我如何让我的json文件工作？

1 个答案: