0

スライドショーがあります。前と次のボタンもあります。スライドショーは、表示されている画面サイズに応じてサイズが変更されます。前と次のボタンを常にスライドショーの中央に配置する必要があります。追加するposition: absolute;と、大きな画面では正しく表示されません。

html：

<div class="slideshow" style="position: relative;">
    </div>
    <div id="prev"></div>
    <div id="next"></div>

css：

#prev, #next
{
    position: absolute;
    z-index: 20;
    width: 41px;
    height: 80px;
    cursor: pointer;
    top: 300px;
}

#prev
{
    left: 0;
    background-image: url("img/prev.png");
    background-position: 0 0;
    background-repeat: no-repeat;
}

#next
{
    right: 0;
    background-image: url("img/next.png");
    background-position: 0 0;
    background-repeat: no-repeat;
}
4

5 に答える 5

3

前/次の要素がスライドショーの外にあるため、スライドショーは全画面表示であると想定しています。

http://jsfiddle.net/kudoslabs/aFJze/

上部を50％に配置し、アンカーの高さをオフセットする必要があります。

#prev, #next{
top: 50%;
margin-top: -20px ; /*half the height of the element, assuming 40px*/
}
于 2012-11-16T09:21:37.977 に答える
1

私が見るようにそれは正しく配置されていません

    <div id="prev"></div>
   <div id="next"></div>

相対的な位置にあるラッパーがありません。スライドショーにラッパーがあり、内部に配置して配置すると問題ありません。

これ

<div class="slideshow" style="position: relative;">
    </div>
    <div id="prev"></div>
    <div id="next"></div>

これに

<div class="slideshow" style="position: relative;">
    <div id="prev"></div>
    <div id="next"></div>
</div>
于 2012-11-16T09:15:34.733 に答える
0

これを試してみてください。cssを少し調整する必要があります。具体的には、マージンを左に調整して、正しく並べて表示されるようにします。

デモデモ_

#prev
{
    position: absolute;
    z-index: 20;
    width: 41px;
    height: 80px;
    cursor: pointer;
    top: 50%;
    left : 50%;
    margin-left:0px;
    margin-top:-40px;
} 

#next
{
    position: absolute;
    z-index: 20;
    width: 41px;
    height: 80px;
    cursor: pointer;
    top: 50%;
    left : 50%;
    margin-left:-60px;
    margin-top:-40px;
}
于 2012-11-16T09:20:23.590 に答える
0 
<div id="prev"></div>
<div id="next"></div>

これらは中にあるはずです

<div class="slideshow" style="position: relative;">
</div>

そしてcssの内部

#prev, #next{position:absolute;top:50%}

問題が解決することを願っています

于 2012-11-16T09:22:37.537 に答える
0

私はあなたがこのように見えることを願っています：-デモ

HTML

<div id="slideshow">
    <div id="prev"></div>
    <div id="next"></div>
 </div>

CSS

#slideshow {
    position: relative;
    border:1px solid red;
}

#prev, #next
{
    position: absolute;
    width:70px;
    height: 70px;
    cursor: pointer;
    background-position: 0 0;
    background-repeat: no-repeat;


}

#prev
{
    left:50%;
    background-image: url("http://www.mouserunner.net/free_games/Right_Arrow_Icon_Black.png");
}

#next
{
    right:50%;
    background-image: url("http://www.mouserunner.net/free_games/Right_Arrow_Icon_Black.png");
    background-position: 0 0;
}
于 2012-11-16T09:35:28.583 に答える