HTML代码在Chrome和服务器上不起作用？

我有一个简单的HTML页面，它使用ResponsiveSlides.js从JSON文件中获取图片，它在Firefox中工作，但不显示其他浏览器中的空白页面，并且当我从服务器运行它时，它只是单独显示图片没有动画？我应该如何在所有浏览器和服务器上运行我的HTML？HTML代码在Chrome和服务器上不起作用？

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ResponsiveSlides.js/1.55/responsiveslides.min.js"></script> 

</head> 
<body> 

<div> 
<ul id="exampleSlider"> 
</ul> 
</div> 

<script type="text/javascript"> 
    $.getJSON('slides.json', function(data) { 
    $("h2").html(data[0].title); 
     $.each(data, function (i, f) { 
      if(i>0){ 
       $("#exampleSlider").append("<li><a><img src=" + f.content + "></img></a><p>"+f.title+"</p></li>"); 
       $("a").attr("href", "#"); 
      } 
     }); 
    }); 

    $(function() { 
     $("#exampleSlider").responsiveSlides({ 
     auto: true, 
     pause: true, 
     speed: 1200, 
     timeout: 3000 
     }); 
}); 
</script> 
</body> 
</html>

来源

2017-04-01 Alex

你应该初始化responsiveSlides后您插入您的图片在页面（的AJAX完成后）。

$(function() { 

    $.getJSON('slides.json', function(data) { 

    $("h2").html(data[0].title); 

    $.each(data, function(i, f) { 
     if (i > 0) { 
     $("#exampleSlider").append("<li><a><img src=" + f.content + "></img></a><p>" + f.title + "</p></li>"); 
     $("a").attr("href", "#"); 
     } 
    }); 

    $("#exampleSlider").responsiveSlides({ 
     auto: true, 
     pause: true, 
     speed: 1200, 
     timeout: 3000 
    }); 

    }); 

});

来源

2017-04-01 23:09:17

感谢，现在工作在服务器上，但仍然没有在其他浏览器如Chrome或歌剧这方面的工作是错误：XMLHttpRequest的无法加载文件：/// C：/用户/赛义德/桌面/最后的/ BS-二元管理/资产/ JSON/slides.json。协议方案仅支持跨源请求：http，data，chrome，chrome-extension，https。 – Alex

@alex是的，ajax请求在'file：//协议（*本地*）上的chrome中不起作用。请参阅https://bugs.chromium.org/p/chromium/issues/detail?id=47416 –

HTML代码在Chrome和服务器上不起作用？

回答

相关问题