javascript - 我没有在我的页面中看到我的按钮

Question

在我的 HTML 页面中，我没有看到我的按钮...请帮助我...

#container
{
    position:relative;
    width:700px;
    height:400px;
    border: 2px solid black;
        background-color:#888;
    margin: 50px auto 0px;
    overflow:hidden;
}
.box
{
    position:relative;
    width:600px;
    height:300px;
    border: 1px solid black;
    margin: 50px auto 0px;
    overflow:hidden;
}
#button
{
    margin:47%;
    position:absolute;
    margin-top:2%;
}

JAVASCRIPT：

<script type="text/javascript">
    var $c =0;
    function next()
    {
        var boxes = document.getElementsByClassName("box");
        $c +=1;
        if($c >= boxes.length) $c = 0;
        for (var $i=0;$i<boxes.length;$i++)
        {
            boxes[$i].style.display  = "none";
        }
    boxes[$c].style.display  = "block";
    return false;
    }
    function prev()
    {
        var boxes = document.getElementsByClassName("box");
        $c -=1;
        if($c < 0) $c = (boxes.length-1);   
        for (var $i=0;$i<boxes.length;$i++)
        {
            boxes[$i].style.display  = "none";
        }
    boxes[$c].style.display  = "block";
    return false;   
    }
</script>

HTML：

<div id="container">
    <div class="box"><img src="img1.jpg"/></div>
    <div class="box"><img src="img2.jpg"/></div>
    <div class="box"><img src="img3.jpg"/></div>
<div id= button>
    <button id="bwd" onclick="return prev()"><<</button>
    <button id="fwd" onclick="return next()">>></button>
</div>

</div>

Answer 1

这可能是因为您在按钮内部使用<和，所以浏览器会错误地解释您的 HTML。>

尝试>for>和<for <，它应该可以正常工作。（这些被称为HTML 实体。）

---

另一个原因可能是您的边距将按钮移动到另一个元素下。尝试根本不给按钮设置样式（删除 CSS），看看你会得到什么。

Answer 2

<除非你想开始一个标签，否则不要写入你的 html 代码。

代替

<div id= button>
    <button id="bwd" onclick="return prev()"><<</button>
    <button id="fwd" onclick="return next()">>></button>
</div>

和

<div id= button>
    <button id="bwd" onclick="return prev()">&lt;&lt;</button>
    <button id="fwd" onclick="return next()">&gt;&gt;</button>
</div>

Answer 3

尝试这个

.box {
    border: 1px solid black;
    float: left;
    height: 300px;
    margin: 50px 45px;
    overflow: hidden;
    position: relative;
    width: 600px;
}