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 的元素设置为相对。最后使用“top”“bottom”“left”“right”变量设置按钮的位置。

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