Question

我创建了一个位于div元素内的幻灯片。图像不会添加到html中，而是通过javascript调整其类属性以淡入淡出。

我正在尝试在下一张和上一张幻灯片的图片上添加按钮。

我遇到的问题是img标签显示在屏幕上和调试器中显示的html结构内部，但当我检查元素时，div位于顶部，图像上方的高度为0px？所以图像不在里面。

原因是我想添加相对于包含div元素的按钮（以确保在调整窗口大小时它们保留在图像的左/中，右/中间。

澄清;我需要在div #container中添加图像，以便大小/位置相对于它。然后我想将其他图像添加为相对于div的按钮，以便在调整屏幕大小时它们保持在原位。我该怎么做？

HTML

<div id="container">
<!--IMG elements created in JS go here-->
<img class="previous_button" src="symbols/PreviousArrow.png"/>
<img class="next_button" src="symbols/NextArrow.png"/>
</div>

<script src = "jsScript.js" type="text/javascript"></script>

CSS

#container {
position: relative;
z-index:1;
width:50%;
height:600px;
top:20%;
border:10px solid black;
}

#container img#main {
transition:opacity 2s;
z-index:1;
position:absolute;
top:20%;
opacity:0;
width:25%;
}   

#container img#main.fadeIn {
opacity:1;
z-index:100;
}

.previous_button {
position:absolute;
margin-left:8%;
height:35px;
width:35px;
}

.previous_button:hover {
opacity:1;
}   

.next_button {
position: absolute;
height:35px;
width:35px;
}

.next_button:hover {
opacity:1;
}

JAVASCRIPT

var curIndex=0;
var imgDuration=2000;
var timeout;
var images;
var links;
var container=document.getElementById("container");

function getImageAndLink(){
images=document.querySelectorAll('img[id]');
};


var imageArray=[
{link:"page1.html", src:"image1.gif", id:"main"}, 
{link:"page2.html", src:"image2.gif", id:"main"}, 
{link:"page3.html", src:"image3.gif", id:"main"}
];


function create(arr){
for (i = 0; i < arr.length; i++) {
var imgEl = document.createElement("img");
imgEl.src=arr[i].src;
var id=arr[i].id;
imgEl.setAttribute("id",id);
var imgElA = document.createElement("a");
var link=arr[i].link;
imgElA.setAttribute("href", link);
imgElA.setAttribute("id",id);
imgElA.appendChild(imgEl);
container.appendChild(imgElA);
}
};

function slideshow() {
images.item(curIndex).className="fadeIn";
links.item(curIndex).className="fadeIn";
    var interval=setInterval(function(){
    images.item(curIndex).className="";
    curIndex++;
    if (curIndex==images.length) {
    curIndex=0;
    };
    images.item(curIndex).className="fadeIn";
},imgDuration);

function stopSlide(){
    clearInterval(interval)
    };
container.addEventListener('mouseover', stopSlide, false);
container.addEventListener('mouseout', slideshow, false);

};

create(imageArray);
getImageAndLink();
slideshow();

Answer 1

看起来您的问题是DIV的内部内容具有绝对位置，然后它们从dom上的DIV出来，因此使其具有0高度。取出那些似乎有高度的absolut位置（为div添加一个边框，以便你可以看到）：拿出这些的位置：

.previous_button {
margin-left:8%;
height:35px;
width:35px;
}

https://jsfiddle.net/gqjcpa0m/3/

将图像定位在div元素内

1 个答案: