这就是我到目前为止所拥有的。我正在尝试解析 json 文件并获取 img 路径和宽度,获取 GETJson json 中每条记录的返回值,并附加到“Gallery”中一个名为 thumbs 的类的无序列表中。因此,不是在 html 中有几行代码“li img src=图像路径”width=“,我可以只读取 json 文件并填充它。
我的 json 看起来像这样:
[ {“图像”:“滑块/img/img1.jpg”,“宽度”:400 },{“图像”:“滑块/img/img2.jpg”,“宽度”:400 },]
这是 Getjson 逻辑。
<script type="text/javascript">
$().ready(function(){
$.getJSON('fred.json', function(data) {
//Collection of li elements
var items = [];
$.each(data, function(key, val) {
items.append('<li><img src="' + val.image + '+ '" width="'
+ val.width + '" /></li>');
});
$('<ul/>', {
'class': 'thumbs',
html: items.join('')
}).appendTo('#Gallery');
//Once all ul are created call the gallery function
$('#Gallery').flickrGallery();
});
});
</script>
感谢您的任何帮助
我在 json 文件描述中错误地键入了 img 名称。我把它拼写正确了。当我运行 html 时,会发生两件事。图像根本不显示。其他所有内容都会出现背景等,因为图像确实出现了。当我发出警报(项目)时,我可以看到 li 填充。基本上,我在名为 thumbs_1 的 div 中有一个 div id=Gallery 和 ul ,其中 class =thumbs
div id = GALLERY
ul id="thumbs_1" class="thumbs"
li> "img src="images/image_11.jpg" width=600" 这样一共有11行。我不想在 HTML 中对此进行硬编码,我只想使用 GetJson 动态放置同一行代码。然后,一旦填充了 DIV,就
使用这个
$().ready(function(){ $('#Gallery').flickrGallery({
它调用已经开发的特定函数并用于创建照片库。对不起困惑,感谢您已经提供了帮助。