Question

我有3张图像，我需要像这样改变：图1> <图2> <图3>该循环中的图像1等等。

的JavaScript

function changeImage() {

    if (document.getElementById("imgClickAndChange").src = "Webfiles/SUB15_15A.bmp") 
    {
        document.getElementById("imgClickAndChange").src = "Webfiles/SUB15.bmp";
    }

    else if (document.getElementById("imgClickAndChange").src = "Webfiles/SUB15.bmp")
    {
        document.getElementById("imgClickAndChange").src = "Webfiles/SUB15A.bmp";
    }

    else
    {
        document.getElementById("imgClickAndChange").src = "Webfiles/SUB15_15A.bmp"
    }
}

HTML

<img src="Webfiles/SUB15_15A.bmp" id="imgClickAndChange" onclick="changeImage()" usemap="#SUB15" />

任何建议都表示赞赏。我尝试的其他一切都没有用。

Answer 1

在 img 上点击更改img标签的 src 属性，使用计数器将更有助于检查以前的图像源。

HTML：

<img src="http://www.clipartbest.com/cliparts/RiA/66K/RiA66KbMT.png" id="imgClickAndChange" onclick="changeImage()" usemap="#SUB15" />

JS：

var counter = 1;

imgClickAndChange.onclick = function(){
    if(counter == 0){
        document.getElementById("imgClickAndChange").src = "http://www.clipartbest.com/cliparts/RiA/66K/RiA66KbMT.png";
        counter++;
    }
    else if(counter == 1){
        document.getElementById("imgClickAndChange").src = "http://www.wpclipart.com/education/animal_numbers/animal_number_2.png";
        counter++;
    }
    else if(counter == 2){
        document.getElementById("imgClickAndChange").src = "http://upload.wikimedia.org/wikipedia/commons/thumb/e/e4/Number_3_in_yellow_rounded_square.svg/512px-Number_3_in_yellow_rounded_square.svg.png";
        counter = 0;
    }
};

jsFiddle

Answer 2

使用三等于'==='来检查src是否相等的时间。使用等于'='表示您正在分配值，因此您永远不会超过第一个if。

Answer 3

您在if语句中使用赋值运算符而不是比较运算符

if (document.getElementById("imgClickAndChange").src = "Webfiles/SUB15_15A.bmp")

应该是

if (document.getElementById("imgClickAndChange").src == "Webfiles/SUB15_15A.bmp") 
//                                                    ^

同样使用src属性作为比较可能不是一个好主意，因为浏览器可能将其作为绝对URL而不是html src属性中的相对url，这可能更好使用。

if (document.getElementById("imgClickAndChange").getAttribute("src") == "Webfiles/SUB15_15A.bmp")

http://jsfiddle.net/rzannv33/

我建议使用变量来保持图像的状态，就像计数器一样。

点击更改图像（循环显示3张图像）

3 个答案: