在 JavaScript 中使用 offsetx 和 offsettop 或位置 x 和位置 y答案

【问题标题】：Using offsetx and offsettop in JavaScript or position x and positon y在 JavaScript 中使用 offsetx 和 offsettop 或位置 x 和位置 y
【发布时间】：2014-02-06 14:35:35
【问题描述】：

我有一个从点击按钮开始的滑块，我希望每张图片都以200 px 的偏移量加载，与前一张相比。代码如下：

var image1 = new Image()
image1.src = "img0.jpg"
var image2 = new Image()
image2.src = "img1.jpg"
var image3 = new Image()
image3.src = "img2.jpg"
var image4 = new Image()
image4.src = "img3.jpg"
var image5 = new Image()
image5.src = "img4.jpg"

var step = 1

function slideit() {
    document.images.slide.src = eval("image" + step + ".src")
    if (step < 5)
        step++

    else
        step = 1
    setTimeout("slideit()", 500)

}

<button onclick="slideit()">Try it</button>
<img src="img0.jpg" name="slide" width="100" height="100" position = "absolute">

我想在 JavaScript 中执行此操作，因为我不想在我的代码中使用 jQuery。

【问题讨论】：

您好，欢迎来到 StackOverflow。至于您的问题，请检查<script> 标签内是否只有Script 而不是HTML。我已经缩进了您的代码并删除了不相关的部分，以便您更容易阅读。

标签： javascript position offset

【解决方案1】：

我实际上不明白你的问题。也许你应该更精确一点。如果你想做一个图片滑块，那么你的做法似乎不对。

【讨论】：

所以我想知道如何以 1 秒的间隔从数组中加载每个新图像，但每次将 x 位置增加 200 px，因此 img1 将向左多 200 px比img0；并且 img 2 将比 img0 向左多 400px

【解决方案2】：

嘿，这应该适合你。我没有时间检查它，所以我希望它没有错误。只需更新JS，即可留下html。

问候

var images = [
    'image1.jpg',
    'Image2.jpg',
    '...'
];

function slideit()
{
    var index = 0;
    var container = document.getElementById('yourContainer');

    var addPic = function()
    {
        var img = document.createElement('img');
        img.src = images[index];
        img.style.position = 'absolute';
        img.style.left = index * 200 + 'px';

        container.appendChild(img);
        index++;
    }


    setInterval(addPic, 1000);
}

【讨论】：