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币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
jquery+ajax实现鼠标拖拽图片位置交换
原先图片位置是 img1 img2 img3 经过鼠标拖拽后变成 img3 img2 img1
用JavaScript实现点击循环切换图片
仅适合初学者,用JavaScript实现点击循环切换图片。
卷积神经网络Quiz4
卷积神经网络Quiz4
Mat result=img1.clone(); cv::add(img1,img2,result,mask);
{         Mat img1 = imread("boldt.jpg");//imread(argv[1], CV_LOAD_IMAGE_GRAYSCALE);   Mat img2 = imread("rain.jpg"); //imread(argv[2], CV_LOAD_IMAGE_GRAYSCALE);   Mat mask = imread("rainMask.jpg"
opencv库图像特征提取与匹配--参考SLAM十四讲7.2
#include #include #include #include using namespace std; using namespace cv; int main(int argc, char **argv) {    /* if(argc !=3){     cout     return 1;     }*/     Mat imag1=imre
sift开发记录1
先上几个有用的例子 1.
使用JavaScript来实现图片的切换
最终实现的效果如图: 设计的思路是这样的:    1.上面的图片个数是变化的,初始化为0  -> num   2.图片要动态的加进去,不是一开始就定好的,通过传递的参数确定,将图片都放到一个数组中去 ->imgArr   3.图片对应的li也是变化的,根据传入的图片的个数来定   4.图片对应的文本也是变化的 textArr   5.事件也是变化的,通过参数传进去 ->evt
JS五张连篇,点击左右按钮可以移动!(图片左右滚动特效)
JS五张连篇,点击左右按钮可以移动!(图片左右滚动特效)主要用于想实现图片左右能滚动,点击左右按钮图片可以移动!!不错的!
利用JavaScript实现,点击图片转到下一个图片
实现函数: function changImage(img){         img.src = img.src + "?" + new Date().getTime(); } 应用(在注册时填的图片验证码):                                             function changImage(img){
js实现点击更换图片
看到很多技术大牛都在写技术博客,作为刚刚入职的一名应届生,我想这是一种好习惯。大概在一个月前有了这样的想法,但是却一直没有实施,说起来真惭愧。今天终于决定发一篇文章,作为一个新的开始。如果这文章有幸被读者读到,我倍感荣幸,谢谢和您的交流。      刚刚入职Web前端开发,还有很多东西需要学习,这段时间,我主要学习javaScript脚本技术,从零开始!