Can't change css style with JS

Question

<script>
        var animate = function (element, target, callback) {
            clearInterval(element.timer);
            element.timer = setInterval(function () {
                var step = (target - element.offsetLeft) / 10;
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
                element.style.left = element.offsetLeft + step + 'px';
                // console.log(element.offsetLeft);
                if (element.offsetLeft == target) {
                    clearInterval(element.timer);
                    callback && callback();
                }
            }, 20)
        };
        window.addEventListener('load', function () {
            var ul = document.querySelector('.local-nav');
            console.log(ul);
            for (var i = 0; i < ul.children.length; i++) {
                ul.children[i].children[0].children[0].style.backgroundPosition = '0 ' + -i * 32 + 'px';
            }
            var ul2 = document.querySelector('.subnav-entry ul');
            console.log(ul2);
            for (var i = 0; i < ul2.children.length; i++) {
                console.log(ul2.children[i].children[0].children[0]);
                ul2.children[i].children[0].children[0].style.backgroundPosition = '0 ' + -i * 32 + 'px';
            }

            var focus_ul = document.querySelector('.focus ul');
            var ol = document.querySelector('.focus ol');
            var count = 0;
            var focus_timer = setInterval(function () {
                if (count == 2) {
                    animate(focus_ul, focus_ul.offsetLeft - 375);
                    // console.log('i run');
                    // console.log(focus_ul.offsetLeft + ' ' + count);
                    // focus_ul.style.left = focus_ul.offsetLeft + 375 * 2 + 'px';

                    focus_ul.style.left = 0 + 'px'; // Here is my problem
                    console.log(focus_ul);
                    console.log(focus_ul.offsetLeft + ' ' + count);
                }
                else {
                    console.log('before animation ' + focus_ul.offsetLeft + ' ' + count);
                    animate(focus_ul, focus_ul.offsetLeft - 375);
                    console.log(focus_ul.offsetLeft + ' ' + count);
                }
                // focus_ul.style.left = focus_ul.offsetLeft + 375 + 'px';
                count++;
                count = count % 3;
                for (var i = 0; i < ol.children.length; i++) {
                    ol.children[i].className = '';
                }
                ol.children[count].className = 'current-choice';
                console.log('after a round ' + focus_ul.offsetLeft + ' ' + count);
            }, 2500)
        })
    </script>

I meant to do a photo show that can play automaticly, like a Carousel or swiper, The 375px means that the screen is 375px wide, according to the code, when comming to the last photo, as the animation end, it should change back to the initial one which style.left == 0px, but 0px only occur a small while, next time it would be -1125px, -1500px and so on, I'm confused why i set style.left to 0 but fruitless. I'm new in front end ,thanks helping

vishva8kumara · Accepted Answer · 2022-08-01 12:28:44Z

1

You can use more of CSS (and less JavaScript) for this animation.

Declare two separate CSS class definitions for focus_ul. Use JavaScript to change the className of focus_ul.

Use CSS transition for animation of CSS offset-left property.

See: https://www.w3schools.com/css/tryit.asp?filename=trycss3_transition1

Write that custom className instead :hover in above example.

answered Aug 1, 2022 at 12:28

vishva8kumara

3551 gold badge3 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Can't change css style with JS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related