2011-06-09 143 views
0

我建立一个网站在这里 和我挣扎的东西,困扰我 我试图做一个增量按钮,这将改变图像取决于增量参数 例如,如果值等于0,图片是‘A’ 然后我增加它的值是“1,画面是‘b’等 我做了一些代码在这里变化图像增益参数

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org /TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>Image Change Demo</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<script type="text/javascript"> 
function increaseValue (eleId) { 
    var ele = document.getElementById(eleId); 
    ele.value = parseInt(ele.value) + 1;} 
    function decreaseValue (eleId) { 
    var ele = document.getElementById(eleId); 
    if(ele.value!=0){ 
     ele.value = parseInt(ele.value) - 1; 
    }}; 
function changeIt(imageName,objName) 
    { 
var obj = document.getElementById(objName); 
var imgTag = "<img src='"+imageName+"' border='0' />"; 

obj.innerHTML = imgTag; 

return; 
    }; 
</script> 
</head> 

<body> 
<div id="image1"> 
    <img src="1.jpg" border="0" alt="" /> 
</div> 

<br><br> 

<input type="text" value="1" id="incrementer" /> 
<input type="button" value="+" onclick="increaseValue('incrementer'),changeIt('button/next.png','image1');"> 
<input type="button" value="-" onclick="decreaseValue('incrementer'),changeIt('button/plus.png','image1');"> 
</html> 

任何人都可以帮帮我 ?

回答

2

使用jQuery一个简单的解决方案可能是以下几点:

$(":button").click(function() { 
    var currentValue = $(":text").val(); 
    var symbol = $(this).val(); 
    if(symbol == "+") { 
     currentValue++; 
     $(":text").val(currentValue); 
    } 
    else { 
    currentValue--; 
     $(":text").val(currentValue); 
    } 
    $("img").hide(); 
    $("img:eq("+(currentValue-1)+")").show(); 
}); 

HTML

<div id="image1"> 
    <img src="http://dummyimage.com/100x100/000/fff&text=1.jpg" border="0" alt="" /> 
    <img src="http://dummyimage.com/100x100/000/fff&text=2.jpg" border="0" alt="" /> 
    <img src="http://dummyimage.com/100x100/000/fff&text=3.jpg" border="0" alt="" /> 
</div> 

<br><br> 

<input type="text" value="1" id="incrementer" /> 
<input type="button" value="+"> 
<input type="button" value="-""> 

演示:http://jsfiddle.net/KQP99/

+0

非常感谢 但为什么我不能使它发挥作用? 我只改变img src,但增量不起作用 – 2011-06-09 19:10:25

+0

@Kevin phytagoras你可以在http://jsfiddle.net/上创建一个演示来检查它吗? – Sotiris 2011-06-09 19:14:28

+0

是的,但增量不会工作 – 2011-06-09 19:18:15