因此，我有一个图片幻灯片，其中包含箭头按钮，允许用户转到下一张或最后一张图像。如何使这些箭头出现在图像的适当侧面或侧面（上一幅图像的左中间和下一幅图像的右中间）？
这是我当前的代码：
<head>
<title>change picture</title>
<script type = "text/javascript">
function displayNextImage() {
x = (x === images.length - 1) ? 0 : x + 1;
document.getElementById("img").src = images[x];
}
function displayPreviousImage() {
x = (x <= 0) ? images.length - 1 : x - 1;
document.getElementById("img").src = images[x];
}
function startTimer() {
setInterval(displayNextImage, 6000);
}
function startUp(){
document.getElementById("img").src = images[0];
}
var images = [], x = -1;
images[0] = "image1.jpg";
images[1] = "image2.jpg";
</script>
</head>
<body onload = "startTimer(); startUp()">
<button type="button" onclick="displayPreviousImage()"> «</button>
<img id="img" style="width:500px;height:380px;" src="startpicture.jpg">
<button type="button" onclick="displayNextImage()"> »</button>
</div>
</body>
最佳答案
将图像包装在容器中，以获得如下所示的HTML结构：
<div class="imgContainer">
<button class="leftButton"></button>
<img class="slideshowImage">
<button class="rightButton"></button>
</div>
然后应用这样的CSS：
.imgContainer {
position: relative;
}
.leftButton {
position: absolute;
left: 0; bottom: 50%;
}
.rightButton {
position: absolute;
right: 0; bottom: 50%;
}
通过将按钮的
position属性指定为absolute，可以使它们相对于其最接近的父级以absolute或relative位置定位。这就是为什么我们将
.imgContainer的位置设置为relative的原因。现在，我们可以使用
left，right，top和bottom属性将按钮定位在容器中。查看本文以获得更深入的解释：Absolute Positioning Inside Relative Positioning。
按钮的完美垂直居中更加棘手，并且需要再次破解，因此现在您可以只使用
bottom: 50%;或在准备就绪时进入Centering in CSS的技巧。