Chciałbym zrozumieć, na jakiej zasadzie działa slider zdjęć (przeglądarka zdjęć z przewijaniem). Mam dwa divy. Jeden w drugim. Pierwszy, zewnętrzny, ma atrybut overflow = "hidden";
Do środkowego umieszczam zdjęcia. Próbuję przesunąć wewnętrzny div o 100px
jednak nic to nie daje. Co robię źle?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function createFrame(w, h) {
var frame = document.createElement("div");
frame.classList.add("extSlider");
frame.style.width = String(w) + "px";
frame.style.height = String(h) + "px";
frame.style.overflow = "hidden";
return frame;
}
function createInternalFrame(w, h) {
var interFrame = document.createElement("div");
interFrame.classList.add("intFrame");
interFrame.style.width = String(w) + "px";
interFrame.style.height = String(h) + "px";
interFrame.position = "relative";
return interFrame;
}
function createCombinedFrame(w, h) {
var f_ext = createFrame(w, h);
var f_int = createInternalFrame(w, h);
f_ext.appendChild(f_int);
return f_ext;
}
function createImgFromSource(img, w, h) {
var image = document.createElement("img");
image.src = img;
image.style.width = String(w) + "px";
image.style.height = String(h) + "px";
image.style.position = "relative"
image.classList.add("imgPart");
image.style.cssFloat = "left";
return image;
}
function addImg(imgObj) {
document.getElementsByClassName("intFrame")[0].appendChild(imgObj);
}
function addAllImgs(imgs, sliderObj, w, h) {
for (var i = 0; i < imgs.length; i++)
addImg(createImgFromSource(imgs[i], w, h));
}
function addToBody(slider) {
document.getElementsByTagName("body")[0].appendChild(slider);
}
function createSlider(imgs, w, h) {
var slider = createCombinedFrame(w, h);
addToBody(slider);
addAllImgs(imgs, slider, w, h);
}
function getImages() {
return document.getElementsByClassName("intFrame");
}
function slideRight() {
var imgs = getImages();
imgs[0].style.left = "100px";
}
createSlider(["slider-logo-img-tiny.png", "slider-logo-img-tiny.png", "slider-logo-img-tiny.png"], 200, 200);
setInterval(slideRight, 500);
</script>
</body>
</html>