Question

帮我解决这个琐碎的问题。

我需要在button_Click中更改图像顺序。我怎样才能做到这一点？

Actualy我需要**最简单的**方式，**没有jQuery **。

非常感谢工作代码的解释 - 这对我来说很头疼

[这里] [1]是我的代码

PS我已经有了一些建议，但所有这些建议都与jQuery相关

＆＃13;

No jQuery

＆＃13;

<div id="one"> 
              
        <input id="b1" value="Change the image order" onclick="change_order()" type="button"/>
       
        <h1 style="font-size: 12"> Header HeaderHeaderHeader</h1> 
        <p style="font-size:8"> text text text </p>
    </div>


<div id="picContainer">
        
        <img id="pict_01" src="http://heaversfarm.files.wordpress.com/2013/01/i-love-maths.jpg" />
        <img id="pict_02" src="http://www.uplandsoutreach.org/wp-content/uploads/2013/04/20maths1.jpg" />
        <img id="pict_03" src="http://www.milldamschool.ik.org/img/d666f5fc-db14-11de-a689-0014220c8f46-5812526.jpg" />
        <img src="http://www.birdsontheblog.co.uk/wp-content/uploads/2010/05/maths.jpg" />
        
    </div>

＆＃13;

Answer 1

希望您根据自己的要求找到以下代码。

<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction()">Click me</button><br/>
<br/>
<img height="50" width="50" id="demo1" src="http://www.largeyellowbutton.com/largeyellowbutton.jpg"></img>
<br/>
<img height="50" width="50" id="demo2" src= "http://libn.com/wp-files/graphics/register-button_0.jpg"></img>
<br/>
<img height="50" width="50" id="demo3" src=    "http://mygimptutorial.com/images/button-with-reflection/11.jpg"></img>

<script>
 function myFunction() {
 var temp=document.getElementById("demo1").src;
 document.getElementById("demo1").src = document.getElementById("demo2").src;
 document.getElementById("demo2").src = document.getElementById("demo3").src;
 document.getElementById("demo3").src = temp;
 }
</script>

</body>
</html>

Answer 2

如果您知道div中的图像数量，请使用我上面发布的代码。如果您不确定要添加的图像数量，请使用以下代码。

<html>
<head>
<script>
function myFunction() {
var count=document.getElementById("picContainer").getElementsByTagName("img").length;
//below code captures the first image source before 
//changing the image order. This is also used to assign as source to the
// last image tag.
var temp=document.getElementById("pict_01").src;
var i;

for(i=1;i<=count;i++)
{
 //If value of i is equal to count then, assign the first image source
 // captured in temp variable to the last image inside the div.
 if(i==count){
 document.getElementById("pict_0"+i).src=temp;
 }

//below code assigns image in decreasing order.
document.getElementById("pict_0"+i).src = document.getElementById("pict_0"+(i+1)).src;
}
}
</script>
</head>
<body>
<input type="button" onclick="myFunction()" value=" Change an image order"></input> 
<br/>
<div id="picContainer">
    <img id="pict_01" src="http://heaversfarm.files.wordpress.com/2013/01/i-love-maths.jpg" />
    <img id="pict_02" src="http://www.uplandsoutreach.org/wp-content/uploads/2013/04/20maths1.jpg" />
    <img id="pict_03" src="http://www.milldamschool.ik.org/img/d666f5fc-db14-11de-a689-0014220c8f46-5812526.jpg" />
    <img id="pict_04" src="http://www.birdsontheblog.co.uk/wp-content/uploads/2010/05/maths.jpg" />
</div>
</body>
</html>

单击按钮更改图像的顺序

2 个答案: