Изменение изображения на HTML и Javascript при нажатии кнопки

Я пытаюсь, чтобы эти снимки менялись при нажатии кнопки, изображения локальны для моего компьютера и должны меняться последовательно. При нажатии на кнопку, он просто создает новую картину, мне нужно их поменять местамиИзменение изображения на HTML и Javascript при нажатии кнопки

<html> 
<head> 
<script> 
var imgs=document.images; 
function changeLight() { 
    var firstImage = imgs[0].src + ""; 
    for(var i=0; i<imgs.length-1; i++){ 
     imgs[i].src=imgs[i+1].src+""; 
    } 
    imgs[imgs.length-1].src=firstImage; 
} 

</script> 

</head> 
<body> 
<div id="splash"> 
<img src="Traffic Light Red.gif" alt="" id="mainImg"> 

</div> 
<body> 
<div id="wrapper"> 
<div> 
    <img id="image" src="images/test" /> 
    <br><br><br> 
    <button id="clickme" onclick="changeLight();">Click to change</button> 


    <img src="Traffic Light Yellow.gif" hidden /> 
    <img src="Traffic Light Green.gif" hidden /> 
    <img src="Traffic Light Yellow2.gif" hidden /> 
</div> 
</div> 
</body>

источник

2015-11-09 Maximilian BELL

'просто генерирует новое изображение', что вы подразумеваете под этим? – Tgsmith61591

Идея RIght, я думаю, что ошибочный и надёжный подход. Вы делаете то же самое, что и эта ссылка (концептуально), хотя onClick вместо onMouseOver ... вам нужно немного подкорректировать его, но это должно указывать вам в правильном направлении: http: //www.wikihow. com/Make-a-JavaScript-Image-Rollover – Tim

так вы имеете в виду первые приходят как третий, второй, как первая и третья в секунду ?? и снова то же самое при следующем нажатии?

проверка скрипка http://jsfiddle.net/stdeepak22/hax3d8cv/

$(document).ready(
function(){ 
    $('#nextImage').click(function(){ 
      var firstImage = $('#AllImages img:first'); 
     $(firstImage).remove(); 
     $('#AllImages').append(firstImage); 
    }); 
});

UPDATE

чистый JavaScript. для тех, кто говорит "JQuery именно для этого мой мой?";)

http://jsfiddle.net/stdeepak22/0mcLcozk/

function f(){  
    var allImage = document.getElementById('AllImages'); 
    var firstImage = allImage.getElementsByTagName('img')[0]; 
    allImage.removeChild(firstImage); 
    allImage.appendChild(firstImage); 
}

источник

2015-11-09 13:23:12

jQuery для этого? мой мой ... – Rishav

@ RishavKundu специально для вас .. проверьте версию JS также –

См сценарий:

<html> 
<head> 
<script> 

var imgs=document.getElementsByTagName('img'); 

var init = 3; 
console.log(imgs[2].src); 
function changeLight(){ 
var target = document.getElementById('imaget'); 

var firstImage = imgs[0].src + ""; 
if(init < 5){ 
target.src = imgs[init].src; 
init = init +1; 

} 
else{ 
init = 3; 
target.src = imgs[init].src; 
} 
} 

</script> 

</head> 

<div id="splash"> 
<img src="Traffic Light Red.gif" alt="" id="mainImg"> 

</div> 
<body> 
<div id="wrapper"> 
<div> 
    <img id="imaget" src="images/test" /> 
    <br><br><br> 
    <button id="clickme" onclick="changeLight();">Click to change</button> 


    <img src="Traffic Light Yellow.gif" hidden /> 
    <img src="Traffic Light Green.gif" hidden /> 
    <img src="Traffic Light Yellow2.gif" hidden /> 
</div> 
</div> 
</body>

Это работает для меня. Я хотел бы предложить вам использовать array values (изображение srcs), установленный в javascript, вместо использования скрытых изображений.

источник

2015-11-09 13:33:39

Ухх, почему у вас есть два открывающих тега для тела? – Rishav

Вот несколько кодов. Он работает, сравнивая атрибуты скрытых изображений src, а не очень изящную технику, но он работает. Этот метод также будет нарушен, если вы добавите изображения до последнего скрытого изображения, поэтому используйте его с осторожностью.

Также не забудьте переименовать файлы, чтобы они не имели пробелов. В Интернете пробелы превращаются в% 20s при запросе, что имеет тенденцию ломать вещи :)

В любом случае, вот код.

<!doctype html> 
<html> 
    <body> 
     <div id="splash"> 
      <img src="TrafficLightRed.gif" alt="" id="mainImg"> 
     </div> 
     <div id="wrapper"> 
      <div> 
       <button id="clickme" onclick="changeLight();">Click to change</button> 
       <img src="TrafficLightRed.gif" hidden> 
       <img src="TrafficLightYellow.gif" hidden> 
       <img src="TrafficLightGreen.gif" hidden> 
      </div> 
     </div> 

     <script> 

      function changeLight() { 
       var currentImg = document.getElementById("mainImg"); 
       for(var i=1;i<3;i++) { 
        if(document.images[i].src == currentImg.src) { 
         currentImg.src = document.images[i + 1].src; 
         return; 
        } 
       } 
       currentImg.src = document.images[1].src; 
      } 
     </script> 
    </body> 

</html>

Более надежная техника будет хранить массив ссылок на изображения в JavaScript, вместо Hacky скрытых изображений. Брауни указывает на это!

источник

2015-11-09 13:54:26 Rishav

Изменение изображения на HTML и Javascript при нажатии кнопки

ответ

Смежные вопросы