javascript - 设置左样式 CSS 属性以在 Javascript 中移动 slider

标签 javascript html css

我正在尝试通过调整 CSS left 属性和 Javascript 中的 setInterval 函数在 javascript 中创建 slider 效果。 我的代码看起来像这样

<body onload="move('imagetag');">
    <div id="container">
        <img id="imagetag" src="img.jpg" style="left:40px; position:absolute;">
    </div>
    <script>
        function move(tag) {
            var target = document.getElementById(tag).style;
            var current = target.left;

            function moveObject() {
                current = parseInt(current) + 10 + 'px';
                console.log(current);
                setTimeout(moveObject, 1000);
            }
            setTimeout(moveObject, 1000);
        }
    </script>
</body>

console.log 打印出正确的值,但它没有反射(reflect)在 CSS 中。

最佳答案

这是因为您没有编写样式,您只是读取它并编辑值本身而不是 target.left

            function move(tag) {    
                var target = document.getElementById(tag).style;
                var current = target.left;                  
                function moveObject () {
                    current = parseInt(current) + 10 + 'px';
                    console.log(current);
                    target.left = current;  // <- 
                    setTimeout( moveObject,1000);
                }
                setTimeout( moveObject, 1000);
            }

关于javascript - 设置左样式 CSS 属性以在 Javascript 中移动 slider ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18527730/

相关文章:

html - 为段落元素提供边距实际上并不适用于父 div

javascript - 在 JavaScript 中实现鼠标悬停功能

javascript - 如何使用谷歌地图 API V3 显示城市范围

javascript - 在选择的 Enter() 部分中的主要数据元素之前添加 <a> 标记

javascript - 如何添加表单验证和警报

html - 避免 dt 和 dd 元素之间的分页符

php - 无法添加或更新子行

javascript - 使用鼠标悬停在其他 div 中显示图像

javascript - 文档准备就绪后加载 Div 内容

html - 页脚在页面底部上方,而不是在页面内容的底部