困惑创造旋转木马

Question

我正在尝试使用w3schools中提供的基本示例创建旋转木马。

最重要的是，我正在创建一个额外的div并在其中插入我的内容。这是我的Javascript。

<script>
        var slideIndex = 1;
        showDivs(slideIndex);

        function plusDivs(n) {
            showDivs(slideIndex += n);
        }

        function showDivs(n) {
            var i;
            var x = document.getElementsByTagName("table")
            if (n > x.length) { slideIndex = 1 }
            if (n < 1) { slideIndex = x.length }
            for (i = 0; i < x.length; i++) {
                x[i].style.display = "none";
            }
            x[slideIndex - 1].style.display = "block";
        }
    </script>

这是一个工作小提琴http://jsfiddle.net/h9sa7Lgw/

我这里有2个问题，

1. 我想把箭头带进我的div（mainDiv）。
2. 上一个箭头（<）似乎不起作用。在小提琴中，即使>不起作用，但在我的本地也可以。

我的问题不是关于js小提琴，只是告诉我的小提琴问题，如果代码运行，它将无法运行。

有人可以让我知道我哪里出错了，我该如何解决这个问题。

由于

Answer 1

根据建议，请查看您的开发人员工具以便正确调试，您可以按F12键访问它。在console它可以抛出错误消息，可以提供问题提示，同样在elements它会突出显示您的元素。

1. I want to bring the arrows inside my div(mainDiv). 实际上它在你的mainDiv
里面



1. The previous arrow(<) doesn't seem to work. In the fiddle even > is not working, but in my local it does work.

这里有一堆错误。首先，你的脚本在body onload上执行，所以正确它应该是无包装（看看这个答案jsFiddle onload and and no-wrap in body）。另一个错误是，在左侧按钮的onclick属性中，它显示为nclick而不是onclick。在修复之后，它应该作为魅力。这是你修改过的小提琴：http://jsfiddle.net/h9sa7Lgw/

Answer 2

相对于mainDiv放置位置。

.mainDiv {
    border: 1px solid black;
    width: 50%;
    margin-left: 10%;
    position: relative;
}