0

我对 Javascript 相当缺乏经验，但我一直在努力解决一些不应该这么难的事情。我正在尝试让我的脚本检查已加载的图像以查看它是否有效（不是丢失的文件），如果它丢失，则将图像数组重置为第 0 项并重复，因为我可以假设它有当遇到丢失的文件时，到达目录中可用图像的末尾。

我需要在本地目录中为幻灯片显示保留几个硬编码的图像名称，但如果保留的名称多于图像，我需要重置它而不是显示损坏的图像。

我无法使用 PHP 或 HTML5 来获得更直接和动态的解决方案。我已经尝试了几次尝试，但我只是没有想法。任何帮助，将不胜感激。谢谢你。

    <!DOCTYPE html>
<html>
    <head>
        <title>Monitor Display<title>
        <script src="jquery-1.10.2.min.js"></script>
        <base href="file://c:/LocalDir/"/>


        <!-- CSS -->
        <style>
            .images { 
                position:relative; margin:-8px; max-width:100%; height:auto;}
            .images img { 
                position:absolute; left:0; top:0; margin:-8px; max-width:100%; height:auto;}
            body {
                background-color:rgb(51,51,51);}
        </style>
    </head>

<body>
    <!-- Animation -->
    <script>

    $(document).ready(function(){
        changeImage();
    });

    function changeImage() {
        var img = $('.images img');

        if(x >= (images.length-1)) { 
            x = 0;
        }
        else
        {
            x++;
        }

        img[0].src = images[x];
        setTimeout("changeImage()", 5000);
    }

    var images = [],
    x = 0;

    images[0] = "ThumbChart0big.png";
    images[1] = "ThumbChart1big.png";
    images[2] = "ThumbChart2big.png";
    images[3] = "ThumbChart3big.png";
    </script>   
    <!-- Image Container -->
    <div class="images">
        <img src="ThumbChart1big.png"/>
    </div>

</body>

</html>
4

1 回答 1

0

你可以使用 .error() ：

....
var x = 0;
function changeImage() {
    var img = $('.images img');
    img.error( function() {
      x = 0;  // reset the array index
    });
   //continue...
于 2013-08-26T23:07:35.210 回答