从xml文件加载图像详细信息然后显示

时间:2013-07-09 10:15:01

标签: javascript jquery html css

这是我的imageSlider代码。在XML中,我已经存储了图像的所有细节。下面的代码只显示我在调用getData()之前打印alert()的所有图像。没有警报消息它不显示任何东西。

    <script type="text/javascript">

                var imgFront=new Array();
                var n=0;
                var backimg=new Array();
                var imgArr = new Array();   
                var bgImg = new Array();
                var eventChk="";
                var i = 1;  
                var frontimg = new Array();
                var stripimg=new Array();
                var frontText = new Array();
                var fTitle = new Array();
                var fCity = new Array();
                var fYear = new Array();
                var fLoc = new Array();
                var fType = new Array();
                var fRole = new Array();
                var arrBackImg = new Array();
                var backText = new Array();
                var frontDiv = new Array();
                var fpos=0;
                var spos=0;
                var tpos=0;
                var ftext="";
                var fSize = 0;
                var fFamily = "";
                var fColor = "";
                var totalimages=0;



                function getData(){ 
                    $.get('photos.xml', function(xml) {
                            $('item', xml).each(function (k) {
                                frontimg.push($(this).find('frontImg').text()); 
                                    stripimg.push($(this).find('stripImg').text());
                                frontText.push($(this).find('frontTxt').text());
                                fTitle.push($(this).find('title').text());
                                fCity.push($(this).find('city').text());
                                fYear.push($(this).find('compYear').text());
                                fLoc.push($(this).find('loc').text());
                                fType.push($(this).find('type').text());
                                fRole.push($(this).find('role').text());
                                arrBackImg.push($(this).find('backImg').text());    
                                backText.push($(this).find('backTxt').text());
                                frontDiv.push("<h2>"+fTitle[k]+"</h2>"+ "<h3>"+fCity[k]+"</h3><hr><h4>YEAR OF COMPLETION</h4>"+fYear[k]+"<hr><h4>LOCATION</h4>"+fLoc[k]+"<hr><h4>PROPERTY TYPE</h4>"+fType[k]+"<hr><h4>MAPLETREE'S TYPE</h4>"+fRole[k]);


                                $('#myImageFlow').append('<div id="id'+k+'" alt="div'+k+'" class="sliderImage" width="280" height="425" style="visibility:hidden"> <div class="frontText" id="f'+k+'">'+frontDiv[k]+'</div><div class="borderdiv" id="b'+k+'"></div><div class="borderdiv1" id="b'+k+'"></div><div class="reflection" id="ref'+k+'"></div>  </div>');


                                alert('called '+k);
                            });


                    });
                }


                $(document).ready(function () {
                    getData();
                    alert('START');

                });

        </script>
        <script type="text/javascript" src="js/iSlider.js"></script>        
    </head>
    <body>
        <div id="myImageFlow" class="imageflow">    </div>
    </body>
</html>

0 个答案:

没有答案