0

画像に前と次のボタンがある Jquery スライダーを作成したいと思います。現在、画像の下に前と次のボタンを表示する次のコードがあります。スライダーは想定どおりに機能するようになりましたが、ボタンは画像内ではなく画像の下にあります。これを変更して、画像に前と次のボタンを表示するにはどうすればよいですか?

HTML コード:

<div id="slider">
       <ul>
         <li id="slide1"></li>
         <li id="slide2"></li>
         <li id="slide3"></li>
       </ul>
       <a href="#" id="slider_prev"></a>
       <a href="#" id="slider_next"></a>
</div>

CSS コード:

#slider {
width:1148px;
    overflow: hidden;
}
#slider ul {
 margin: 0;
 padding: 0;
 list-style-type: none;
 position: relative;
 z-index: 1;
}
#slider ul li {
 float: left;
 width: 1148px;
 height: 195px;
}
#slider_prev, #slider_next {
width:53px;
height:52px;
display:block;
margin-top:69px;
}
#slider_prev {
float:left;
margin-left:42px;
margin-right:92px;
background: url("../images/prev.png") no-repeat 0 0 transparent;
}
#slider_next {
float:right;
margin-right:42px;
margin-left:92px;
background: url("../images/next.png") no-repeat 0 0 transparent;
}
#slide1 {
 background-image: url("../images/slider_1.png");
}
#slide2 {
 background-image: url("../images/slider_2.png");
}
#slide3 {
 background-image: url("../images/slider_3.png");
}
4

1 に答える 1

1

あなたがしたいことは、ある要素を他の要素の上に配置することです。2 つのアンカー タグの位置を絶対に設定する必要があります。そして、それらの要素の z-index を設定します。z-index は、どの要素が他の要素の上にあるかを決定します。比較的低い z-index は要素を他の要素の下に移動し、その逆も同様です。ただし、絶対位置は、親要素に対して相対的である必要があります。要素をスライダーに対して相対的に配置しているため、id=slider を持つ要素は相対的に設定する必要があります。最後に、「上」「下」「左」「右」変数を使用してボタンの位置を設定します。

#slider {
    width:1148px;
    overflow: hidden;
    position: relative; //Set parent element to relative
}
#slider_prev, #slider_next {
    width:53px;
    height:52px;
    display:block;
    position: absolute;    // Set the buttons to position absolute
    z-index: 100;  //Set a value for z-index
    top: px;  //Set the amount of pixels from top of "slider" div
}
#slider_prev {
    left: px;  //Set the amount of pixels from left of "slider" div
    background: url("../images/prev.png") no-repeat 0 0 transparent;
}
#slider_next {
    right: px;  //Set the amount of pixels from right of "slider" div
    background: url("../images/next.png") no-repeat 0 0 transparent;
}

それが役立つことを願っています。

于 2013-01-27T17:27:50.523 に答える