使用%使用单按钮JavaScript函数交换图像_Javascript_Image_Function

使用%使用单按钮JavaScript函数交换图像

javascript image function

使用%使用单按钮JavaScript函数交换图像,javascript,image,function,Javascript,Image,Function,程序员们！祝你度过一个美好的下午！在其他用户的帮助下，我能够管理每几秒钟在第二个图像之间来回更改一个图像。太棒了！因此，我用%运算符计算了一些数学运算，当图像第一次显示时，我得到了浏览器的默认断开链接图像，但在2秒钟后，一切都按计划进行。于是，这个调查性实验开始了。我决定不自动交换，而是让我们用一个按钮来交换，以便能够在我想要的时间内调查页面。但是，如果有人想再做同样的事情，为什么不在此过程中学习另一个很酷的技巧呢。这个技巧是同时显示两个图像，这样当单击按钮时，它们交换位置。相同的数学，不

程序员们！祝你度过一个美好的下午！在其他用户的帮助下，我能够管理每几秒钟在第二个图像之间来回更改一个图像。太棒了！因此，我用%运算符计算了一些数学运算，当图像第一次显示时，我得到了浏览器的默认断开链接图像，但在2秒钟后，一切都按计划进行。于是，这个调查性实验开始了。我决定不自动交换，而是让我们用一个按钮来交换，以便能够在我想要的时间内调查页面。但是，如果有人想再做同样的事情，为什么不在此过程中学习另一个很酷的技巧呢。这个技巧是同时显示两个图像，这样当单击按钮时，它们交换位置。相同的数学，不同的效果为用户。太棒了

目标是：显示两个图像，并在其下方显示一个按钮。单击按钮时，图像将交换位置。左边的图像应该在右边，右边的现在应该在左边。不用jQuery，这毕竟是一个JavaScript实验（我还没有学到很多jQuery，但我已经迫不及待了！）

浏览器错误控制台消息：有趣的是firefox什么也没给我。我打开浏览器，从VS 2012加载页面，清除错误conslole，刷新页面。什么也没有。然而，在chrome（我的默认浏览器）中，我没有找到本地主机pic src 404。我觉得这很奇怪，因为这个代码在一个页面上，碰巧有其他代码引用了这些相同的图片，并且工作正常。2秒钟的自动img翻转是其他代码的一部分

调试：我很想知道这是怎么回事。我得到了基本的想法并进行了一些研究。在VS站点上有关于设置断点和运行多个VS实例以使用另一个引擎的所有信息。我很快就会在youtube上找到答案。我很抱歉，但是，如果有一些简单的调试修复到这一点，我应该看到它。在我的第二节网络课上反复练习，但该主题尚未涉及：(

以下是我发现的与我的问题类似的文章。这有助于了解他们是如何设置if else的：总的来说，这些都是我读不懂的，显然这位作家比我更先进。第二点：我觉得有点信息过载。这方面有很多问题，但我在阅读完代码后，从未设法更改过任何代码

如果你好奇，这里是我简要提到的VS文章：

这是我的代码：

 <script type="text/javascript">
            function swap_pics() {
                var c = 1
                //I had:
                //var andy_arr = ["andy_white.jpg","andy_black.jpg"];
                var andy_src1 = "andy_left.jpg";
                var andy_src2 = "andy_right.jpg";
                c = ((c + 1) % 2);
                if (c == 0) {

                    //I was using an array which looked like:
                    // document.getElementById('andy_left').src = "andy_arr[0]";
                    // document.get ... _right').src = andy_arr[Math.abs(c-1)];
                    //0-1 abs = 1
                    //1-1 = 0, so It looks like it should now toggle.

                    document.getElementById('andy_left').src = andy_src1;
                    document.getElementById('andy_right').src = andy_src2;
                }
                else {
                    document.getElementById('andy_left').src = andy_src2;
                    document.getElementById('andy_right').src = andy_src1;
                }
            }
        </script>    
        <div id="mini_lab_5">
        <img src="" 
            id="andy_left"
            height="100"
            width="100"
            />
        <img src=""
            id="andy_right" 
            height="100"
            width="100"
            />
        <br />
        <input type="button" value="Swap" 
            onclick="swap_pics();
    "/>
    </div>


函数交换_pics（）{
变量c=1
//我有：
//var andy_arr=[“andy_white.jpg”、“andy_black.jpg]；
var andy_src1=“andy_left.jpg”；
var andy_src2=“andy_right.jpg”；
c=（（c+1）%2）；
如果（c==0）{
//我使用的数组看起来像：
//document.getElementById（'andy_left'）.src=“andy_arr[0]”；
//document.get…_right'）.src=andy_arr[Math.abs（c-1）]；
//0-1 abs=1
//1-1=0，所以看起来现在应该切换。
document.getElementById（'andy_left'）。src=andy_src1；
document.getElementById（'andy_right'）。src=andy_src2；
}
否则{
document.getElementById（'andy_left'）。src=andy_src2；
document.getElementById（'andy_right'）。src=andy_src1；
}
}

感谢您成为社区的一部分并使其变得伟大

您可以将图像直接添加到您的img标签中，如下所示：

<img src="andy_left.jpg" 
            id="andy_left"
            height="100"
            width="100"
            />
        <img src="andy_right.jpg"
            id="andy_right" 
            height="100"
            width="100"
            />

这里有一个简单的jsfiddle来做这件事：

祝你好运

<html>
<head>
<script type="text/javascript">
function switchImage () {
    var imgleft = document.getElementById('image1'),
        imgright = document.getElementById('image2'),
        img_left_src = imgleft.src,
        img_right_src = imgright.src;

    imgleft.src = img_right_src;
    imgright.src = img_left_src;

}
</script>
</head>
<body>
    <div>
        <img id="image1" src="./home-cat.jpg" />
        <button id="butnum" onclick="switchImage();">Switch</button>
        <img id="image2" src="./images.jpeg" />
    </div>
</body>
</html>


函数switchImage（）{
var imgleft=document.getElementById（'image1'），
imgright=document.getElementById（'image2'），
img_left_src=imgleft.src，
img_right_src=imgright.src；
imgleft.src=img_right_src；
imgright.src=img_left_src；
}
转换

您在Chrome中看到404的URL是什么？您应该使用Chrome或Firefox的开发工具进行调试。在swap_图片中，您有

var c=1

，因此您的结果将始终是相同的。URL是一个本地主机地址，不允许我粘贴到问题中-这里是：我确定并收集有关开发者工具，谢谢！我已经将VarC=1更改为0，我认为c=c+1%2应该改变它在var中的值。现在它是0，当我按下按钮时，404错误的数量要多得多，挑战性地前进！谢谢确保图像文件与html文件位于同一文件夹中，或者如果图像不在同一文件夹中，则影响图像相对路径的src属性。此外，您应该声明您的var c=0；在交换图片功能之外。完美！我的时间紧迫，但我会尽快复习和吸收。非常感谢您的帮助！我喜欢。

<html>
<head>
<script type="text/javascript">
function switchImage () {
    var imgleft = document.getElementById('image1'),
        imgright = document.getElementById('image2'),
        img_left_src = imgleft.src,
        img_right_src = imgright.src;

    imgleft.src = img_right_src;
    imgright.src = img_left_src;

}
</script>
</head>
<body>
    <div>
        <img id="image1" src="./home-cat.jpg" />
        <button id="butnum" onclick="switchImage();">Switch</button>
        <img id="image2" src="./images.jpeg" />
    </div>
</body>
</html>