Question

我有一个JSON文件，其中包含pics的地址，我使用JSON连接到JSON文件，我也使用一个名为“lightslider”的插件来显示图片，我的问题是当我运行HTML注意时显示但刷新后显示的页面。和其他问题是它只适用于火狐。以及服务器不在服务器上工作。请给我一些简单可行的方法，在JSON文件中显示滑块上的图片，该文件适用于所有浏览器。感谢。

<!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>

Answer 1

关于JavaScript上的问题仅在刷新后尝试将代码包装在window.onload = function(){}中，以便在DOM完全加载后加载代码。

如何用json源的滑块显示图片？

1 个答案: