javascript - 在 JavaScript 中的 ClickEvent 上选择图像

Question

我需要 JavaScript、HTML、HTML DOM 和 DHTML 方面的帮助。我对 JavaScript 不太熟悉，但我正在尝试使用 JavaScript 和 HTML 创建网站。情况是这样的，

div                          div
main image                   main image

image1                       image1
image2                       image2
image3                       image3 
                             image4

默认情况下，它会在页面加载时显示 image1 作为主图像，当用户单击该 div 下的任何图像时，它应该替换主图像。

function ChangesSrc()
{
    if(x == 0)
    {
        x = 1;
        document.getElementById('image1').src = "";
        document.getElementById('image1').style.width = "306px";
        document.getElementById('image1').style.height = "230px";   
    }
    else if(x == 1)
    {
        x = 2;
        document.getElementById('image1').src = "";
        document.getElementById('image1').style.width = "306px";
        document.getElementById('image1').style.height = "230px";       
    }
    else if(x == 2)
    {
        x = 0;
        document.getElementById('image1').src = "";
        document.getElementById('image1').style.width = "306px";
        document.getElementById('image1').style.height = "230px";           
    }
    else
    {
        x = 0;
        document.getElementById('image1').src = "";
        document.getElementById('image1').style.width = "306px";
        document.getElementById('image1').style.height = "230px";       
    }

}
</script>

我的问题是我必须在点击事件中为每个图像指定图像 src，并且它还按顺序显示图像（如果我首先单击最后一个图像；仍然它仅将第一个图像显示为主图像）。

谁能指导我？

score 1 · Accepted Answer

I'd suggest the following, though it may lack some of your particulars, since I've used CSS to style the smaller images (.thumbs) and the main image (#main):

function show(el) {
    if (!el) {
        // function requires a reference to the clicked element, here 'el'
        return false;
    }
    else {
        // finds the element with id="main"
        var showIn = document.getElementById('main'),
            // sets the sISrc variable with the src of the showIn element
            sISrc = showIn.src,
            // sets the variable 'elSrc' with the src value of the clicked element
            elSrc = el.src;
        // re-sets the src of the 'main' element with the src of the clicked element
        showIn.src = elSrc;
        // sets the clicked element's src to the (previous) value of the 'main' element
        el.src = sISrc;
    }
}

// finds all the images
var images = document.getElementsByTagName('img');

for (var i = 0, len = images.length; i < len; i++) {
    // iterates through all the images and assigns an 'onclick' event-handler
    images[i].onclick = function() {
        // passes the current image into the show() function when clicked
        show(this);
    };
}

JS Fiddle demo.

Edited above code revised to allow for multiple instances of the...gallery thing, this version will only affect the .main element (as there are, or may be, multiple elements with the same identifier I've switched to class names, though in the current version this requires that the images are within the same (immediate) parent (el.parentNode):

function show(el) {
    if (!el) {
        return false;
    }
    else {
        var showIn = el.parentNode.getElementsByClassName('main')[0],
            sISrc = showIn.src,
            elSrc = el.src;
        showIn.src = elSrc;
        el.src = sISrc;
    }
}

var images = document.getElementsByTagName('img');

for (var i = 0, len = images.length; i < len; i++) {
    images[i].onclick = function() {
        show(this);
    };
}

JS Fiddle demo.

References:

score 0 · Accepted Answer

function openimage(mainimageurl)
{

        document.getElementById('Idofthebimage').src =mainimageurl;
        //set the width height once in css  

 }

现在说在每张图片上写下这个onclick="openimage(this.src)"，或者如果更大的图片网址不同onclick="openimage('theurlofthebiggerimage')"

score 0 · Accepted Answer

I put together the following demo which shows how you can have a series of image elements and swap them with a main one at the top of the group.

I have included the window.onload event handler, as well, since you cannot attach element event handlers until that element has been parsed and added to the DOM, which (in most cases) helps to prevent errors occurring from within your Javascript.

This isn't the only way to handle the problems associated with running scripts before or during page loads (for instance, the script call run inline and access elements that have already been parsed before window.onload fires). But it is a common, mostly durable solution for smaller, more procedural scripts.

<div id="imgs">
    <div>
        <img id="mainimg" src="http://goo.gl/UohAz"/>
    </div>
    <img src="http://www.gravatar.com/avatar/f893555be713a24dee52230712cdde3a?s=128&d=identicon&r=PG"/>
    <img src="http://www.gravatar.com/avatar/495d675e3bc42ed1dee469e2ce701f1b?s=128&d=identicon&r=PG"/>
    <img src="http://www.gravatar.com/avatar/db5a61382c2ba7309071c323edb4013b?s=128&d=identicon&r=PG"/>
</div>

window.onload = function() {
    var imgs = document.getElementById('imgs').getElementsByTagName('img'),
        mainimg = document.getElementById('mainimg'),
        i = imgs.length,
        lastimg;

    var swap = function() {
        var old = mainimg.src;

        mainimg.src = this.src;
        this.src = old;
    };

    while (i--) {
        img = imgs[i];
        img.id = 'img-' + i;

        if (img.parentNode.id == 'main-img') {
            lastimg = img.id;
        }

        img.onclick = swap;
    }
};

http://jsfiddle.net/userdude/yq9Fq/

javascript - 在 JavaScript 中的 ClickEvent 上选择图像

3 回答 3

Related

Reference