在JavaScript或位置X和Potiton y中使用OffSetX和OffSetTop

Question

我有一个滑块，该滑块从单击按钮开始，我希望与上一张相比，以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 。

Answer 1

我实际上没有得到你的问题。也许您应该更加精确。如果您想制作图片滑块，那么您的方法似乎不对。

Answer 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);
}