我创建了一个位于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();
答案 0 :(得分:0)
看起来您的问题是DIV的内部内容具有绝对位置,然后它们从dom上的DIV出来,因此使其具有0高度。 取出那些似乎有高度的absolut位置(为div添加一个边框,以便你可以看到): 拿出这些的位置:
.previous_button {
margin-left:8%;
height:35px;
width:35px;
}