-1

In my HTML page i didn't see my buttons...please help me...

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

4

3 に答える 3

3

ボタンの内部で使用<して>いるため、ブラウザが HTML を間違って解釈している可能性があります。

&gt;for>と&lt;forを試してみると、<正しく動作するはずです。(これらはHTML エンティティと呼ばれます。)

もう 1 つの理由は、余白がボタンを別の要素の下に移動している可能性があります。ボタンのスタイルをまったく設定しない (CSS を削除する) ようにして、どこに到達するかを確認してください。

于 2013-06-14T08:06:09.790 に答える
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>
于 2013-06-14T08:06:22.560 に答える
0

これを試して

.box {
    border: 1px solid black;
    float: left;
    height: 300px;
    margin: 50px 45px;
    overflow: hidden;
    position: relative;
    width: 600px;
}
于 2013-06-14T08:05:31.227 に答える