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。对于那些说＆＃34; jQuery的人呢？我的我的＆＃34; ;）

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 个答案: