изменить изображение на основе параметра приращения - PullRequest
Новая
       22

изменить изображение на основе параметра приращения

0 голосов
/ 09 июня 2011

Я создаю веб-сайт здесь, и я борюсь за то, что беспокоит меня, я пытаюсь сделать кнопку увеличения, которая изменит изображение, зависит от параметра приращения, например, если значение равно '0', изображениеэто «а», тогда я увеличиваю его, значение «1», а изображение «б» и т. д. Я сделал здесь некоторый код 

<!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>

Может кто-нибудь помочь?

1 Ответ

2 голосов
/ 09 июня 2011

Простое решение с помощью 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/

...