实际上我有一个json文件（images.json）
{
"images": [
{"title": "Image One", "url": "image1.jpg", "rating": "3.5"},
{"title": "Image Two", "url": "image2.jpg", "rating": "1"},
{"title": "Image Three", "url": "image3.jpg", "rating": "5"}
]
}
我需要使用这个json数据创建一个幻灯片我已经尝试过搜索你的网站，但我不能得到预期的结果
<html>
<body>
<div class="main">
<div class="title"></div>
<div class="content"></div>
</div>
</body>
</html>
<script>
$(document).ready(function () {
$(function(){
var json = {
"slider":[{
"img" : "image1.jpg",
"title" : "Beady little eyes",
"expert" : "Little birds pitch by my doorstep"
},
{
"img" : "image2.jpg",
"title" : "Beady little eyes",
"expert" : "Little birds pitch by my doorstep"
}
]};
// if you are getting json like above response in ajax
// then simply retrive slider and iterate over it
var mhtml = '<ul>';
$.each(json.slider, function(key, val){
mhtml += '<li><div class="bannerImg"><img src="'+val.img+'" /></div>';
mhtml += '<h1 class="title">'+val.title+'</h1>';
mhtml += '<p class="expert">'+val.expert+'</p>';
mhtml += '</li>';
});
mhtml += '</ul>';
$('#slideshow').append($(mhtml));// append DOM only one time.
})});
</script>
你能提到任何需要导入的样式表或脚本文件吗？
没有id为slideshow的元素，并且缺少jquery库。希望它现在能起作用。在下面-
<html>
<body>
<div class="main">
<div class="title"></div>
<div id="slideshow" class="content"></div>
</div>
</body>
</html>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$(function(){
var json = {
"slider":[{
"img" : "image1.jpg",
"title" : "Beady little eyes",
"expert" : "Little birds pitch by my doorstep"
},
{
"img" : "image2.jpg",
"title" : "Beady little eyes",
"expert" : "Little birds pitch by my doorstep"
}]
};
// if you are getting json like above response in ajax
// then simply retrive slider and iterate over it
var mhtml = '<ul>';
$.each(json.slider, function(key, val) {
mhtml += '<li><div class="bannerImg"><img src="'+val.img+'" /></div>';
mhtml += '<h1 class="title">'+val.title+'</h1>';
mhtml += '<p class="expert">'+val.expert+'</p>';
mhtml += '</li>';
});
mhtml += '</ul>';console.log(mhtml);
$('#slideshow').append($(mhtml));// append DOM only one time.
})
});
</script>