Hoi,
Ik ben bezig met het maken van een slider die een aantal images bevat, en steeds 3 laat zien. Na 4 sec. scrollen de afbeeldingen naar links en verschijnen 3 andere in de DIV.
Na de animatie worden de eerste afbeeldingen mbv appendChild() weer achteraan geplaatst. Dit werkt allemaal goed, maar het div waar de afbeeldingen in staan hebben het CSS eigenschap overflow:hidden, zodat alleen de 3 eerste afbeeldingen zichtbaar zijn. Zoals de titel al doet vermoeden is MSIE het hier niet mee eens wat en toont de website alsof overflow:visible is genoemd.
Hieronder de 3 bestanden die betrekking hebben op het deel van de pagina:
HTML:
JS:
CSS:
Als iemand me verder kan helpen, alvast bedankt
Ik ben bezig met het maken van een slider die een aantal images bevat, en steeds 3 laat zien. Na 4 sec. scrollen de afbeeldingen naar links en verschijnen 3 andere in de DIV.
Na de animatie worden de eerste afbeeldingen mbv appendChild() weer achteraan geplaatst. Dit werkt allemaal goed, maar het div waar de afbeeldingen in staan hebben het CSS eigenschap overflow:hidden, zodat alleen de 3 eerste afbeeldingen zichtbaar zijn. Zoals de titel al doet vermoeden is MSIE het hier niet mee eens wat en toont de website alsof overflow:visible is genoemd.
Hieronder de 3 bestanden die betrekking hebben op het deel van de pagina:
HTML:
HTML:
<div id="slideview">
<div id="slidestroke">
<img src="foto1.jpg" height="200" width="300"><img src="foto2.jpg" height="200" width="300"><img src="foto3.jpg" height="200" width="300"><img src="foto4.jpg" height="200" width="300">
</div>
</div>JS:
PHP:
slide_x=0;
slide_n=1;
slide_w=300;
function slide(){
slide_x-=2;
document.getElementById("slidestroke").style.left=slide_x+"px";
if(slide_x>-slide_n*slide_w){
window.setTimeout(slide,10);
}
else{
swap(slide_n);
window.setTimeout(slide,5000);
}
}
function swap(n){
while(n>0){
e=document.getElementById("slidestroke");
slide_x+=slide_w;
e.style.left=slide_x+"px";
e.appendChild(e.getElementsByTagName('img')[0]);
n--;
}
}
window.onload=window.setTimeout(slide,5000);CSS:
Code:
#slideview{
width: 900px;
height: 200px;
overflow: hidden;
border: 3px solid #FFFFFF;
padding: 0px;
}
#slidestroke{
position: relative;
left: 0px;
width: 9000px;
text-align: left;
padding: 0px;
height: 100%;
}Als iemand me verder kan helpen, alvast bedankt
