Question

在这个模块中，我只想制作一本翻书（杂志），所以即时拍摄javascript数组中的图像，但图像没有加载，而不是图像（[object＆＃34; htmlimageelement] =＆＃34;＆＃34;）正在显示。我不明白我的代码中缺少的内容。我确定我的图片目录是正确的。我想我在javascript文件中遗漏了一些东西。

HTML：

<html>
    <head>      
        <title>Flipbook</title>     
        <link href="jqmodule.css" type="text/css" rel="stylesheet" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script src="jqmodule.js" type="text/javascript"></script>      
        <script src="jquery.easing.1.3.js" type="text/javascript"></script>
        <script src="jquery.booklet.latest.js" type="text/javascript"></script>     
    </head>
    <body class="body_div">
        <div class="container">         
            <div class="main clearfix">
                <div class="custom_wrapper">
                    <h3>Flipbook</h3>
                    <div id="mybook" class="booklet"></div>             
                </div>
            </div>
        </div>      
    </body>
</html>

JS：

var heading=['background-size','Using transform and the transform functions','Audio','CSS 1, CSS 2.1, CSS3 ...','The benefits of CSS3'];
    var para = new Array();
    para[0] = new Image();
    para[0].src = 'images/1.jpg';
    para[1] = new Image();
    para[1].src = 'images/2.jpg';
    para[2] = new Image();
    para[2].src = 'images/3.jpg';
$(function() {  
    var str="";
    for(var i=0;i<para.length;i++)
    {
        str+="<div class=\"b-page-blank\"><h1>"+heading[i]+"</h1><img src="+para[i]+"/></div>";                                 
    }
    $('#mybook').html(str);
    $('#mybook').booklet({ name: "Booklet" });  
    $(".b-counter").click(function(){   
        if($(this).attr('id')==2||$(this).attr('id')==4)
        {           
            $("#mybook").booklet("next");           
        }
        if($(this).attr('id')==3||$(this).attr('id')==5)
        {           
            $("#mybook").booklet("prev");
        }       
    });
});

Answer 1

我可以尝试这种方式，更清洁，更容易调试，

var data = [
    {heading:'background-size',imageSrc:'/images/1.jpg'}, 
    {heading:'Using transform and the transform functions',imageSrc:'/images/2.jpg'}, 
    {heading:'Audio',imageSrc:'/images/3.jpg'}
    // ...
];

$(function() {  
    var str="";
    $.each(data,function(index,row){
        str+="<div class=\"b-page-blank\"><h1>"+row.heading+"</h1><img src=\""+row.imageSrc+"\" /></div>";                                 
    })
    $('#mybook').html(str);
    //... rest of yoru code
});

希望有所帮助

在javascript数组中拍摄图像时不显示img标记

1 个答案: