我有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" />
任何建议都表示赞赏。我尝试的其他一切都没有用。
答案 0 :(得分:2)
在 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;
}
};
答案 1 :(得分:1)
使用三等于'==='来检查src是否相等的时间。使用等于'='表示您正在分配值,因此您永远不会超过第一个if。
答案 2 :(得分:1)
您在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")
我建议使用变量来保持图像的状态,就像计数器一样。