2 qq 15545623 qq_15545623 于 2016.03.21 10:18 提问

javascript问题:我想实现点击图片后,实现img1和img2的切换。

我想实现点击图片后,实现img1和img2的切换。但是只有第一次可以将img1换成img2,之后就不可以了。 当我将图片文件、html文件放在桌面上运行,可以实现效果。而放入新建了一个文件夹时,就还是只能切换一次。

 <script>
            function changeImage()
                {
                    element=document.getElementById('myimage')
                    if (element.src.match("1"))
                    {
                        element.src="img2.jpg";
                    }
                    else
                    {
                        element.src="img1.jpg";
                    }
                }
        </script>

        <img id="myimage" onclick="changeImage()" src="img1.jpg">

11个回答

qq_19891827
qq_19891827   2016.03.21 10:29

不会啊,我试了下,没问题的。

 <img id="myimage" onclick="changeImage()" src="img1.jpg">
 function changeImage() { 
        element=document.getElementById('myimage');
        if (element.src.match("1")) { element.src="img2.jpg"; 
        } else {
        element.src="img1.jpg"; }
    }
ch717828
ch717828   2016.03.21 10:21

//加一个开关就可以了吧

var hasChange = false
function changeImage() {
if(hasChange) return ;
else hasChange=true;
element=document.getElementById('myimage')
if (element.src.match("1")) { element.src="img2.jpg"; }
else { element.src="img1.jpg"; }
}

GuYueDream
GuYueDream   2016.03.21 10:47

楼上的方法可以,但是你的方法也是可以的,你可以好好检查一下有没有哪儿错了。

boheqing_
boheqing_   2016.03.21 10:59

去w3上找实际的例子,自己一看就懂了,都不用问的

qq_15545623
qq_15545623   2016.03.21 11:19

当我将图片文件、html文件放在桌面上运行,可以实现效果。而放入新建了一个文件夹时,就还是只能切换一次

u014706843
u014706843   2016.03.21 12:05

多上w3c看看例子,自己操作一下就差不多了。

yy228313
yy228313   2016.03.21 14:27

```<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


单击图片切换
<br> var i = 0;<br> function changeImage() {<br> element = document.getElementById(&#39;myimage&#39;);<br> if (i == 0) {<br> i = 1;<br> element.src = &quot;img2.png&quot;;<br> }<br> else {<br> i = 0;<br> element.src = &quot;img1.png&quot;;<br> }<br> }</p> <pre><code>&lt;/script&gt; </code></pre> <p></head><br> <body><br> <img id="myimage" onclick="changeImage()" src="img1.png"><br> </body><br> </html></p> <pre><code>不要使用element.src.match(&quot;1&quot;)作为判断条件,因为你页面显示的图片虽然是变量,但html中的&lt;img id=&quot;myimage&quot; onclick=&quot;changeImage()&quot; src=&quot;img1.png&quot;&gt;没变,所以第二次点击时判断还是ture,结果一直是img2.png。 </code></pre>
yy228313
yy228313   2016.03.21 14:28

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


单击图片切换
<br> var i = 0;<br> function changeImage() {<br> element = document.getElementById(&#39;myimage&#39;);<br> if (i == 0) {<br> i = 1;<br> element.src = &quot;img2.png&quot;;<br> }<br> else {<br> i = 0;<br> element.src = &quot;img1.png&quot;;<br> }<br> }</p> <pre><code>&lt;/script&gt; </code></pre> <p></head><br> <body><br> <img id="myimage" onclick="changeImage()" src="img1.png"><br> </body><br> </html></p> <pre><code> </code></pre>
yy228313
yy228313   2016.03.21 14:28

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


单击图片切换
<br> var i = 0;<br> function changeImage() {<br> element = document.getElementById(&#39;myimage&#39;);<br> if (i == 0) {<br> i = 1;<br> element.src = &quot;img2.png&quot;;<br> }<br> else {<br> i = 0;<br> element.src = &quot;img1.png&quot;;<br> }<br> }</p> <pre><code>&lt;/script&gt; </code></pre> <p></head><br> <body><br> <img id="myimage" onclick="changeImage()" src="img1.png"><br> </body><br> </html></p>
yy228313
yy228313   2016.03.21 14:29

var i = 0;
function changeImage() {
element = document.getElementById('myimage');
if (i == 0) {
i = 1;
element.src = "img2.png";
}
else {
i = 0;
element.src = "img1.png";
}
}

共11条数据 1 尾页
Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!