Javascript 动态幻灯片-JSON_Javascript_Jquery_Ajax_Json_Html

Javascript 动态幻灯片-JSON

javascript jquery ajax json html

Javascript 动态幻灯片-JSON,javascript,jquery,ajax,json,html,Javascript,Jquery,Ajax,Json,Html,我正在使用MAXIMAGE Jquery开发一个动态幻灯片。当我试图将img标记元素附加到我的HTML页面时，它将不起作用。我还从服务器输出一个带有图像URL的警报，然后它被拾取。下面是我的代码。我很确定maximage.min.js有冲突。请注意，如果我将maximage id更改为其他内容，则会显示图像 <!DOCTYPE html> <!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif

我正在使用MAXIMAGE Jquery开发一个动态幻灯片。当我试图将img标记元素附加到我的HTML页面时，它将不起作用。我还从服务器输出一个带有图像URL的警报，然后它被拾取。下面是我的代码。我很确定maximage.min.js有冲突。请注意，如果我将maximage id更改为其他内容，则会显示图像

<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
<head>

    <!-- Le Basic Page Needs
    ================================================== -->
    <meta charset="utf-8">
    <title>Viessmann Slideshow</title>
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le Mobile Specific Metas
    ================================================== -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <!-- Le CSS
    ================================================== -->
    <link rel="stylesheet" type="text/css" href="slideshow/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="slideshow/css/style.css"/>

    <!--[if lt IE 9]>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!-- Le Javascript
    ================================================== -->

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>    

    <!-- Le Favicons
    ================================================== -->  
    <link rel="shortcut icon" href="images/favicon.ico">
    <link rel="apple-touch-icon" href="images/apple-touch-icon.png">
    <link rel="apple-touch-icon" sizes="72x72" href="slideshow/images/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="114x114" href="slideshow/images/apple-touch-icon-114x114.png">

</head>
<body> 


<!-- Le Slider -->
<div id="maximage">
    <img id="show"  />        
</div>


<script type="text/javascript" charset="utf-8">    
    var urlstring = "http://localhost:8000";
    $(function() {      
            var logourl = urlstring + "/api/v1/image/?format=json";  
            $.ajax({
                type: "GET",
                url: logourl,
                dataType: "json",
                success:function(data){
                    alert(urlstring + data.objects[5].image);

                    $("#show").attr("src", urlstring + data.objects[2].image);
                }
              });       
    });     
</script>
<!-- Le Javascript -->
<script src="slideshow/js/jquery.cycle.all.js" charset="utf-8"></script>
<script src="slideshow/js/jquery.maximage.min.js" charset="utf-8"></script>
<script src="slideshow/js/scripts.js" charset="utf-8"></script>
</body>    
</html>


维斯曼幻灯片

我找到了错误所在。添加HTML元素后，我不得不调用MAXIMAGE：
var urlstring=”http://localhost:8000";
$（文档）.ready（函数（）{
var logourl=urlstring+“/api/v1/image/”；
$.ajax（logourl{
数据类型：“json”
})
.完成（功能（数据）{
$.each（data.objects、function（i、obj）{
var tag=$（“maximage的样式是什么样的？
I found what the Mistake was. I had to call MAXIMAGE after the HTML elements have been added:

    var urlstring = "http://localhost:8000";



      $( document ).ready(function() {
        var logourl = urlstring + "/api/v1/image/";

        $.ajax(logourl,{
            dataType: "json"

        })

        .done(function( data ) {
              $.each(data.objects, function(i, obj){
                    var tag = $("<img>");
                    tag.attr("src", urlstring + obj.image);
                    tag.appendTo("#maximage");
              });
              jQuery('#maximage').maximage();
          });
        });