Pytanie o Slider, zasada działania

0

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>

slider-logo-img-tiny.png

2

Widocznie nie rozumiesz jak działa position. Twój intFrame musi mieć {position: relative}. A <img> w środku muszą mieć relative/aboslute/fixed (jakąkolwiek nie static).

Samo nadanie obiektowi relative i ustawianie top/left nie sprawi że zacznie zmieniać swoje położenie, to jego parent ma mieć position: relative, a on sam ma być nie-static. W kontekście CSS słowo "relative" nie znaczy "relatywny" (tak, jak większość osób rozumie to słowo) tylko jako "krewny", względem którego zachodzą przesunięcia.

1 użytkowników online, w tym zalogowanych: 0, gości: 1