1

わかりました、これは私がやろうとしていることです。以前は漠然としていたので、ここでより良い説明をします。私は2週間ほどしかページをプログラミングしていないので、助けていただければ幸いです。

3つの画像と各画像のキャプション（説明）を表示するHTML /JavaScriptWebページを作成する必要があります。画像ごとに、最初の画像を同じ主題の別の画像に変更するボタンも作成する必要があります（キャプションも変更します）。また、3つの画像すべてを元の画像に戻すボタンが必要です。

ボタンをクリックすると1つの画像が別の画像に変わるようにコーディングを機能させましたが、2番目と3番目のコーディングを追加すると、何も機能しなくなりました。

<html> 
<head> 
<script> 

function changeImage()
{
var img = document.getElementById("image");
img.src="http://cdn.memegenerator.net/images/300x/159304.jpg";
return false;
}

</script>

</head>
<body>
<img id="image" src="http://thechive.files.wordpress.com/2011/10/william-defoe.jpg" />
<br><br><br>
<button id="clickme" onclick="changeImage();">Click to change image!</button>

<script> 

function changeImage()
{
var img = document.getElementById("image1");
img.src="http://playerperspective.com/wp-content/uploads/2011/05/mike-tyson-3.jpg";
return false;
}

</script>

<body>
<img id="image1" src="http://static.guim.co.uk/sys-    images/Sport/Pix/pictures/2008/10/31/1225454147507/Mike-Tyson-001.jpg" />
<button id="Click1" onclick="changeImage();">Click to change!</button>
</body>

<br>

<script> 

function changeImage()
{
var img = document.getElementById("image2");
img.src="http://static.guim.co.uk/sys-images/Technology/Pix/pictures/2012/3/5/1330958259135/Halo-4-007.jpg";
return false;
}

</script>

<body>
<img id="image2" src="http://cdn.slashgear.com/wp-content/uploads/2012/04/halo-master- chief-1.jpg" />
<button id="Click2" onclick="changeImage();">Click to change!</button>
</body>

<br>

</html>
4

2 に答える 2

1 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script>
        var dd = 5;
        var cnt = 0;
        function chng() {

            var rotator = document.getElementById('rr');  // change to match image ID
            var imageDir = 'Images/';                          // change to match images folder


            var images = ['2.jpg', '3.jpg', '4.jpg', '5.jpg'];

            cnt++;

            var len = images.length;
            if (cnt < dd) {
                rr.src = imageDir + images[cnt];
            }
            else if (cnt == len) {
                rr.src = imageDir + images[0];
                cnt = 0;
            }
        }

</script>

</head>
<body>
<img src="Images/1.jpg" id="rr" height="500" width="650">

    <input type="button" value=" next. . " onclick="chng()" />
</body>
</html>
于 2013-04-19T08:22:32.840 に答える
0

ページにはいくつかの問題があります：ドキュメントタイプ宣言の欠落、titleタグの欠落、実際のコンテンツHTMLの入力、headおよび複数のbodyタグ。これらに加えて、すべて新しいものにchangeImage()交換されます。最後に、 forscriptを変更する最後の関数のみがあります。src#image2

私があなたの質問を正しく理解したなら、あなたはこのようなものが必要です：

scriptでhead：_

function changeImage (element) {
    var n,
        imageData = [
            [
                {
                    src: "http://thechive.files.wordpress.com/2011/10/william-defoe.jpg",
                    caption: "Caption for image 1.1"
                },
                {
                    src: "http://cdn.memegenerator.net/images/300x/159304.jpg",
                    caption: "Caption for image 1.2"
                }
            ],
            [
                {
                    src: "http://static.guim.co.uk/sys-images/Sport/Pix/pictures/2008/10/31/1225454147507/Mike-Tyson-001.jpg",
                    caption: "Caption for image 2.1"
                },
                {
                    src: "http://playerperspective.com/wp-content/uploads/2011/05/mike-tyson-3.jpg",
                    caption: "Caption for image 2.2"
                }
            ],
            [
                {
                    src: "http://cdn.slashgear.com/wp-content/uploads/2012/04/halo-master-chief-1.jpg",
                    caption: "Caption for image 3.1"
                },
                {
                    src: "http://static.guim.co.uk/sys-images/Technology/Pix/pictures/2012/3/5/1330958259135/Halo-4-007.jpg",
                    caption: "Caption for image 3.2"
                }
            ]
        ];
    if (element > -1) {
        document.getElementById('image' + element).src = imageData[element][1].src;
        document.getElementById('caption' + element).innerHTML = imageData[element][1].caption;
    } else {
        for (n = 0; n < imageData.length; n++) {
            document.getElementById('image' + n).src = imageData[n][0].src;
            document.getElementById('caption' + n).innerHTML = imageData[n][0].caption;
        }
    }
    return;
}

そしてbody：

<body>
    <button onclick="changeImage(-1);" >Click to restore all!</button>
    <div>
        <h1 id="caption0">Caption for image 1.1</h1>
        <button onclick="changeImage(0);">Click to change!</button>
        <img id="image0" src="http://thechive.files.wordpress.com/2011/10/william-defoe.jpg" />
    <div>
        <h1 id="caption1">Caption for image 2.1</h1>
        <button onclick="changeImage(1);">Click to change!</button>
        <img id="image1" src="http://static.guim.co.uk/sys-images/Sport/Pix/pictures/2008/10/31/1225454147507/Mike-Tyson-001.jpg" />
    </div>
    <div>
        <h1 id="caption2">Caption for image 3.1</h1>
        <button onclick="changeImage(2);">Click to change!</button>
        <img id="image2" src="http://cdn.slashgear.com/wp-content/uploads/2012/04/halo-master-chief-1.jpg" />
    </div>
</body>

ご覧のとおり、パスとキャプションのデータはネストされた配列のオブジェクトにあります。このようにして、それらは実際のコンテンツから分離され、コードの保守が容易になります。

画像のキャプションのレイアウトの例を提供しなかったので、H1画像の上のタグにキャプション情報を入れました。要素とその位置を自由に変更してください。キャプションテキスト内でHTMLタグを使用することもできることに注意してください。

ただし、このコードを実行する場合、いくつかの制限とCPU時間の浪費があります。imageDataクリックするたびに作成され、要素ごとに2つの異なるパスしか使用できません。

このタスクに対して、よりオブジェクト指向のアプローチをとることをお勧めします。このJSfiddleをご覧ください。これは、非常によく似た機能を示し、より柔軟性があり、保守が簡単な場合があります。

于 2012-11-04T15:14:11.437 に答える