單擊按鈕即可更改HTML和Javascript圖片

Question

我試圖在按下按鈕時交換這些圖片，這些圖片在我的計算機上是本地的，需要按順序更改。 當我按下按鈕時，它只是生成一張新圖片，我需要它們互換

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

Answer 1

這是一些代碼。 它通過比較隱藏圖像的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中存儲圖像鏈接數組，而不是駭人的隱藏圖像。 布朗尼積分的實現！

Answer 2

所以你的意思是先來第三，第二是第一，第三是第二？ 並再次單擊下一步相同？

檢查小提琴http://jsfiddle.net/stdeepak22/hax3d8cv/

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

更新

純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);
}

Answer 3

參考腳本：

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

這對我有用。 我想建議您使用在javascript中設置的array values （圖像srcs），而不要使用隱藏的圖像。

單擊按鈕即可更改HTML和Javascript圖片

問題描述

3 個解決方案

解決方案1
1 2015-11-09 13:54:26

解決方案2
0 2015-11-09 13:23:12

解決方案3
0 2015-11-09 13:33:39

單擊按鈕即可更改HTML和Javascript圖片

問題描述

3 個解決方案

解決方案1 1 2015-11-09 13:54:26

解決方案2 0 2015-11-09 13:23:12

解決方案3 0 2015-11-09 13:33:39

解決方案1
1 2015-11-09 13:54:26

解決方案2
0 2015-11-09 13:23:12

解決方案3
0 2015-11-09 13:33:39