1

各位程序员！一个美好的下午（或无论如何）给你！在其他用户的帮助下，我能够管理让图像每隔几秒钟在第二张图像之间来回切换。这很棒！所以我用 % 运算符计算了一些数学，果然当图像第一次显示时，我得到了浏览器的默认断开链接图像，但 2 秒后一切都按计划进行。于是开始了这个调查实验。我决定不自动交换，而是使用按钮进行交换，以便能够根据需要调查页面。但是谁想要再次做同样的事情，为什么不学习另一个很酷的技巧呢。这个技巧是同时显示两个图像，这样当单击按钮时它们会交换位置。同样的数学，给用户带来不同的效果。是不是很厉害！

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

浏览器错误控制台消息：有趣的是，Firefox 什么也没给我。我打开浏览器，从 VS 2012 加载页面，清除错误控制台，刷新页面。没事了。然而，在 chrome（我的默认浏览器）中，我得到一个 localhost pic src 404 not found。我觉得这很奇怪，因为此代码位于恰好有其他代码引用相同图片并且工作正常的页面上。2 秒自动 img 翻转是其他一些代码。

调试：我很菜鸟知道这是怎么回事。我得到了基本的想法并对其进行了一些研究。在 VS 站点上有关于设置断点和运行多个 VS 实例以使用另一个引擎做某事的所有这些信息。我很快就会在 youtube 上敲定这一点。但是，我很抱歉，如果对此有一些简单的调试修复，我应该目睹它。通过我的第二个网络课程锤击，该主题尚未涵盖:(

这是我发现与我的问题相似的文章。这有助于了解他们如何设置 if else： https ://stackoverflow.com/questions/15671442/swap-image-with-onclick-not-responding 总而言之，我可以阅读更多内容，显然作者比我更高级。第二个：javascript交换文本块onclick锚链接我认为有点信息过载。发生了很多事情，但是在阅读完代码后，我从未设法更改任何代码。

如果您对这里的 VS 文章感到好奇，我简要提到了：http: //blogs.msdn.com/b/visualstudioalm/archive/2013/06/28/javascript-native-interop-debugging-in-visual-studio-2013。 aspx

这是我的代码：

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

感谢您成为社区的一员并使它变得更好！

4

2 回答 2

0

您可以像这样直接将图像添加到您的 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"
            />

那么你的图片应该默认出现在你的页面中，如果不是你的图片链接不好。

然后，您可以将当前的 swap_pics 函数替换为以下内容：

function swap_pics() {
                var andy_left = document.getElementById('andy_left'),
                    andy_right = document.getElementById('andy_right'),
                    andy_left_src = andy_left.src,
                    andy_right_src = andy_right.src;

                andy_left.src = andy_right_src;
                andy_right.src = andy_left_src;
            }

这是一个简单的 jsfiddle 这样做：http: //jsfiddle.net/X9YTP/

于 2013-08-27T11:49:12.440 回答
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>
于 2016-01-13T15:49:46.587 回答