3 
<html>
<head>
    <title>Array of images</title>
    <script type="text/javascript">
        var myPics = new Array[3];
        myPics[0] = "./img/blue.png";
        myPics[1] = "./img/red.png";
        myPics[2] = "./img/yellow.png";
        var counter = 0;

        function preImg(){
        alert(counter);
            if(counter == 0)
                counter = 4;

            counter --;
        alert(counter);
            document.getElementById("coloredImg").src = myPics[counter];
        }

        function nextImg(){
            if(counter == 3)
                counter = -1;

            counter ++;

            document.getElementById("coloredImg").src = myPics[counter];
        }
    </script>
</head>
<body>
    <img src="./img/blue.png" id="coloredImg" alt="Image not found"/>
    <input type="button" onclick="preImg()" value="Previous"/>
    <input type="button" onclick="nextImg()" value="Next"/>
</body>
</html>

私が遭遇する問題は、カウンター変数が関数内で定義されていないことです。たとえば、関数 preImg を呼び出すと、undefined (ちょうど 0 であるべき場合) でアラートが表示され、3 である必要がある場合に 2 番目のアラートで NaN が表示されます。関数が「var カウンター」を認識しないのはなぜですか? 変数 mypics でも同じことが起こると思いますか。ありがとう！

4

3 に答える 3

8 
new Array[3];

する必要があります

new Array(3);

代わりに、角括弧表記を使用して配列を作成します (長さを指定する必要もありません)。

var myPics = [];

なぜこの構文を使用するのでしょうか? 多くの理由があります:

  1. []配列を作成するより高速で短い方法です。
  2. コンストラクターはオーバーライドできますが、このArrayような構文構造はオーバーライドできません。
  3. コード内で見つけやすくなり、デバッグが容易になります。
  4. これには、単一の要素 (つまり[5]) を取り、それを配列の長さとして解釈しない機能があります。これは、面倒なArrayコンストラクターによくある問題です。
于 2012-12-22T15:06:38.573 に答える
4

var myPics = new Array[3];する必要がありますvar myPics = new Array(3);

JsFiddle: http://jsfiddle.net/cbJAc/

于 2012-12-22T15:06:42.057 に答える
3

element、picsおよびのクロージャを使用した単純なスライドショー オブジェクトcounter:

function Slideshow(element, pics) {
    var counter = 0;

    this.nextImg = function () {
        element.src = pics[counter];
        counter = (counter + 1) % pics.length;
    }
    this.nextImg(); // init
}

利用方法：

var show = new Slideshow(
    document.getElementById("coloredImg"),
    ["./img/blue.png", "./img/red.png", "./img/yellow.png"]
);

show.nextImg(); // red
show.nextImg(); // yellow
show.nextImg(); // blue

クロージャーは、関数が定義されたときにスコープ内にあるすべての変数が、関数が呼び出された (または再度呼び出された) ときにもスコープ内にあることを確認します。この標準的な JavaScript 手法は、問題をエレガントに解決しますcounter。

係数ベースの計算を使用すると、カウンターはシーケンスを繰り返すことができます0,1,2(この例では)。

編集：3秒ごとに新しい画像に切り替えたいとします：

setInterval(show.nextImg, 3000);
于 2012-12-22T15:15:16.587 に答える