Question

我想创建一个Jquery滑块，使用图像中的上一个和下一个按钮。我目前有以下代码，它显示图像下方的上一个和下一个按钮。滑块现在按预期工作，但按钮位于图像下方而不是图像中。我怎么能改变它以在图像中有上一个和下一个按钮？

HTML code：

<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");
}

Answer 1

您想要做的是将一个元素放在另一个元素上。您需要将2个锚标记的位置设置为绝对值。然后为这些元素设置z-index。 z-index确定哪个元素高于其他元素。相对较低的z-index将元素移动到其他元素之下，反之亦然。但绝对位置需要相对于某些父元素。由于您是相对于滑块定位元素，因此具有id = slider的元素应设置为relative。最后使用“顶部”“底部”“左”“右”变量设置按钮的位置。

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

希望有所帮助。

jquery滑块的CSS定位

1 个答案: