0
写真のアドレスを含むJSONファイルがあり、JSONファイルへの接続にJSONを使用しました。また、「lightslider」というプラグインを使用して写真を表示しています。それはページをリフレッシュした後に表示されます。他の問題は、火災の狐でしかないということです。サーバ上で動作していないサーバでも同様です。すべてのブラウザで動作するJSONファイルからスライダーに自分の写真を表示する簡単で可能な方法を教えてください。ありがとう。jsonソースからスライダーで写真を表示するには？
のみDOMが完全にロードされた後、あなたのコードがロードされるようにwindow.onload = function(){}でコードをラップする試みをリフレッシュした後、作業はJavaScriptにあなたの問題について
<!DOCTYPE html>
<html lang="en">
<head>
<title>link3</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="lightslider.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="lightslider.js"></script>
<script>
$(document).ready(function() {
$('#image-gallery').lightSlider({
item:1,
speed:500,
auto:true,
loop:true,
pause: 3000,
pauseOnHover:true,
thumbItem:9,
slideMargin: 0,
autoWidth:true,
onSliderLoad: function() {
$('#image-gallery').removeClass('cS-hidden');
}
});
});
</script>
<script>
$(document).ready(function(){
$.getJSON('slides.json', function(data) {
$("h2").html(data[0].title);
$.each(data, function (i, f) {
if(i>0){
$("#image-gallery").append("<li><img src=" + f.content + "/></li>");
}
});
});
});
</script>
</head>
<body>
<h2 style="text-align: center; font-weight: bolder;">
</h2>
<div class="clearfix container" style="max-width:900px;" >
<ul id="image-gallery" class="gallery list-unstyled cS-hidden">
</ul>
</div>
</body>
</html>
実際、私はJSON上の自分のイメージをhtmlに表示するためのより良い方法を探しています。あなたはアイデアを持っていますか、または何か提案されたプラグインを持っていますか？ – Alex
あなたは 'file：/// Users /../ index.html'のようなhtmlファイルをダブルクリックするか、Webサーバー上であなたのソリューションをテストしていますか？あなたのウェブコンソールをクロムで検査し、エラーがあるかどうかを確認し、質問があれば更新してください。 – Mohammed