如何使用“方向键滑动”在 JSON 文件中工作？

发布于 2024-09-14 02:20:14 字数 998 浏览 7 评论 0原文

我创建了一个图像滑动画廊，当用户按下左/右箭头时，一张图像滑出，新图像滑入。效果很好。

所有相关的图像和描述都在我的 PHP 文件中。现在我想要一些新图像，但我发现添加和修改此内容花费的时间比应有的时间长。

因此，我决定删除所有图像标记并为图像创建一个 JSON 文件：

这是我用来检索数据并将其注入 DOM 的代码

 $.getJSON('data.txt', function(data) {
var len = data.length, i; for (i = 0; i < len; i += 1) { 
 $("#image_container").append(
 '<div class="image_frame"><img class="image" src="' + data[i].image + '" width="620px" alt="' + data[i].alt + '">
<div class="caption"></div><div class="innercaption"><p><span>' + data[i].category +
 '</span> &#124;' + data[i].title + '</p></div><div class="caption2"></div><div class="innercaption2">
<p><span>Description</span> &#124 ' + data[i].description + '</p></div></div>' );
  };
});

它在文档准备就绪时运行 - 但现在滑动箭头不起作用，但不会产生错误。

我的猜测是，这是因为内容是与滑块代码同时创建的。所以，他们看不到对方。

有没有办法解决这个问题（也许以滑块代码可以看到它的方式运行 getJSON）？

原文

I created an image sliding gallery where when an user presses the left/right arrows one image slides out and the new image slides in. It worked good.

All the related images and descriptions went in my PHP file. Now I want to have some new images and I found that adding and modifying this content took me longer than it should.

So I decided to remove all the image markup and have a JSON file for the images:

Here is the code that I am using in order to retrieve the data and to inject it in the DOM

 $.getJSON('data.txt', function(data) {
var len = data.length, i; for (i = 0; i < len; i += 1) { 
 $("#image_container").append(
 '<div class="image_frame"><img class="image" src="' + data[i].image + '" width="620px" alt="' + data[i].alt + '">
<div class="caption"></div><div class="innercaption"><p><span>' + data[i].category +
 '</span> |' + data[i].title + '</p></div><div class="caption2"></div><div class="innercaption2">
<p><span>Description</span> | ' + data[i].description + '</p></div></div>' );
  };
});

It runs at the start of document ready - But now the sliding arrows do not work, but no errors are generated.

My guess is that it would be because the content is created at the same time as the slider code. So, they can't see each other.

Is there a way to fix this (maybe run the getJSON in a way that the slider code can see it)?

分享到QQ

分享到微博