Question

我试图通过从XML读取图像在jQuery中制作动态幻灯片。我已经通过在部分中声明它们已成功实现此代码，并将图片本地加载到html文件中。但是，当我尝试从xml加载图像时，它同时显示所有图片而不是一个接一个地显示。有什么解释？这些图片名为Slide1.png，Slide2.png等。

HTML：

 <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML Slideshow</title>
<link rel="stylesheet" type="text/css" href="include/cssstyles.css" />
</head>
<body>

<script src="include/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.js"></script>
 <div class="container">
    <ul class="overview">
    </ul>
</div>



<script>
 $(document).ready(function()
      {
        var temp = "";
        var i = 1;
        $.get('myData.xml', function(d){

        var fcn = $(d).find('book').each(function(){

            var $picture = $(this);
            var imageurl = $picture.attr('imageurl');
            var time_duration = $picture.attr("time_duration");

            var image = '<li> <img alt="" src="' + "images/Slide" + i + ".png "+ '" /> </li>';
            $('.overview').append($(image));
            i++;

        });
    });

        var pages = $('.container li'), current=0;
        var currentPage,nextPage;
        var timeoutID;
        var buttonClicked=0;

        var handler1=function(){
            buttonClicked=1;
            $('container .button').unbind('click');
            currentPage= pages.eq(current);
            if($(this).hasClass('prevButton'))
            {
                if (current <= 0)
                    current=pages.length-1;
                    else
                    current=current-1;
            }
            else
            {

                if (current >= pages.length-1)
                    current=0;
                else
                    current=current+1;
            }
            nextPage = pages.eq(current);   
            currentPage.fadeTo('slow',0.3,function(){
                nextPage.fadeIn('slow',function(){
                    nextPage.css("opacity",1);
                    currentPage.hide();
                    currentPage.css("opacity",1);
                    $('.container .button').bind('click',handler1);
                }); 
            });         
        }

        var handler2=function(){
            if (buttonClicked==0)
            {
            $('.container .button').unbind('click');
            currentPage= pages.eq(current);
            if (current >= pages.length-1)
                current=0;
            else
                current=current+1;
            nextPage = pages.eq(current);   
            currentPage.fadeTo('slow',1,function(){
                nextPage.fadeIn('slow',function(){
                    nextPage.css("opacity",1);
                    currentPage.hide();
                    currentPage.css("opacity",1);
                    $('.container .button').bind('click',handler1);             
                }); 
            });
            timeoutID=setTimeout(function(){
                handler2(); 
            }, 10000);
            }
        }

        $('.container .button').click(function(){
            clearTimeout(timeoutID);
            handler1();
        });

        timeoutID=setTimeout(function(){
            handler2(); 
            }, 10000);



});
</script>
</body>

Answer 1

由于您正在执行ajax从服务器获取数据，因此可能存在无法加载数据的情况，但滑块逻辑将触发。

在某些情况下，即使你也会收到错误。

回调中的滑块功能也是如此。

以下代码可以正常使用!!

$(document).ready(function(){
            var temp = "";
            var i = 1;
           $.get('myData.xml', function(d){

            var fcn = $(d).find('book').each(function(){

                var $picture = $(this);
                var imageurl = $picture.attr('imageurl');
                var time_duration = $picture.attr("time_duration");

                var image = '<li> <img alt="" src="' + "images/Slide" + i + ".png "+ '" /> </li>';
                $('.overview').append($(image));
                i++;

            });
        }).done(function(){
              var pages = $('.container li'), current=0;
            var currentPage,nextPage;
            var timeoutID;
            var buttonClicked=0;

            var handler1=function(){
                buttonClicked=1;
                $('container .button').unbind('click');
                currentPage= pages.eq(current);
                if($(this).hasClass('prevButton'))
                {
                    if (current <= 0)
                        current=pages.length-1;
                        else
                        current=current-1;
                }
                else
                {

                    if (current >= pages.length-1)
                        current=0;
                    else
                        current=current+1;
                }
                nextPage = pages.eq(current);   
                currentPage.fadeTo('slow',0.3,function(){
                    nextPage.fadeIn('slow',function(){
                        nextPage.css("opacity",1);
                        currentPage.hide();
                        currentPage.css("opacity",1);
                        $('.container .button').bind('click',handler1);
                    }); 
                });         
            }

            var handler2=function(){
                if (buttonClicked==0)
                {
                $('.container .button').unbind('click');
                currentPage= pages.eq(current);
                if (current >= pages.length-1)
                    current=0;
                else
                    current=current+1;
                nextPage = pages.eq(current);   
                currentPage.fadeTo('slow',1,function(){
                    nextPage.fadeIn('slow',function(){
                        nextPage.css("opacity",1);
                        currentPage.hide();
                        currentPage.css("opacity",1);
                        $('.container .button').bind('click',handler1);             
                    }); 
                });
                timeoutID=setTimeout(function(){
                    handler2(); 
                }, 10000);
                }
            }

            $('.container .button').click(function(){
                clearTimeout(timeoutID);
                handler1();
            });

            timeoutID=setTimeout(function(){
                handler2(); 
                }, 10000);



    });

        })


    </script>

使用XML在jQuery中创建动态幻灯片 - 所有图像不会单独显示

1 个答案: