Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/80.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 通过单击按钮更改图像的顺序_Javascript_Html_Onclick_Buttonclick - Fatal编程技术网

Javascript 通过单击按钮更改图像的顺序

Javascript 通过单击按钮更改图像的顺序,javascript,html,onclick,buttonclick,Javascript,Html,Onclick,Buttonclick,帮我解决这个小问题。 我需要在单击按钮时更改图像顺序。我该怎么做 实际上,我需要**最简单**的方法,**没有jQuery** 我将非常感谢这段带解释的工作代码——这让我头疼 [这里][1]是我的代码 PS我已经得到了一些建议,但都与jQuery有关 无jQuery 收割台 文本 希望您发现以下代码符合您的要求 <!DOCTYPE html> <html> <body> <button onclick="myFunction()">Click

帮我解决这个小问题。

我需要在单击按钮时更改图像顺序。我该怎么做

实际上,我需要**最简单**的方法,**没有jQuery**

我将非常感谢这段带解释的工作代码——这让我头疼

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

PS我已经得到了一些建议,但都与jQuery有关

无jQuery

收割台
文本


希望您发现以下代码符合您的要求

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

单击我



函数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; }
如果您知道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>

函数myFunction(){
var count=document.getElementById(“picContainer”).getElementsByTagName(“img”).length;
//下面的代码捕获之前的第一个图像源
//更改映像顺序。这还用于将作为源分配给
//最后一个图像标签。
var temp=document.getElementById(“pict_01”).src;
var i;

对于(i=1;我希望这个答案能帮助你,谢谢你的回答!)请检查,这个代码有什么问题?@Oleg Plevin..使用这个javascript代码。函数myFunction(){var count=document.getElementById(“picContainer”).getElementsByTagName(“img”).length;var temp=document.getElementById(“pict_01”).src;var i;for(i=1;我无法理解此代码为何不起作用(((请帮助更正错误。我将非常感谢您使用您提供的JSFIDLE链接检查我已修改的上述代码。上述代码在JSFIDLE中对我有效。请确认。