Question

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

div                          div
main image                   main image

image1                       image1
image2                       image2
image3                       image3 
                             image4

默认情况下，它会在Page load上显示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，并且还按顺序显示图像（如果我先点击最后一张图像;仍然只显示第一张图像为主图像。） / p>

任何人都可以指导我吗？

Answer 1

我建议以下内容，但可能缺少一些细节，因为我使用CSS来设置较小图像（.thumbs）和主图像（#main）的样式： / p>

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

编辑上面修改了代码以允许...图库事物的多个实例，此版本只会影响.main元素（因为有或可能是多个元素）我使用相同的标识符切换到class名称，但在当前版本中，这要求图像位于同一（直接）父级（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

参考文献：

Answer 2

function openimage(mainimageurl)
{

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

 }

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

Answer 3

我整理了以下演示，演示了如何使用一组图像元素并将其与组顶部的主要图像元素进行交换。

我也包含了window.onload事件处理程序，因为在解析该元素并将其添加到DOM之前，您无法附加元素事件处理程序，这在大多数情况下有助于防止内部发生错误你的Javascript。

这不是在页面加载之前或期间处理与运行脚本相关的问题的唯一方法（例如，脚本调用运行内联和之前已经解析过的访问元素<{em> {{ 1}}火灾）。但对于更小，更程序化的脚本来说，它是一种常见的，通常是持久的解决方案。

window.onload

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

在JavaScript中单击事件选择图像

3 个答案: