简单纯javascript图像滑块

我试图用纯js制作最简单的图像滑块，基本上是通过改变背景位置，但循环根本不起作用。我需要不断重复这个循环

function slider1(){
var slide = document.getElementById("slider-1");
var slideWidth = 320;
var backPosY = 0;
var backPosX = 0;
var sliderEnd = 960;
var f;
for(f=backPosX;f < sliderEnd; f+=slideWidth){
    slide.style.backgroundPosition = "-"+f+"px "+backPosY+"px";
}
setInterval(slider1(),1000);}

函数滑块1（）{
var slide=document.getElementById（“slider-1”）；
var slideWidth=320；
var-backPosY=0；
var-backPosX=0；
var sliderEnd=960；
var f；
对于（f=backPosX；f

setInterval

将函数作为第一个参数，但您传递了

slider1（）

括号表示调用函数，因此您正在调用

slider1

，并将函数调用的返回值传递给

setInterval

在您的情况下，

slider1

不返回任何内容，这意味着

setInterval

接收的是

未定义的

，而不是您的函数

您需要传递函数本身，而不是函数调用的结果

setInterval(slider1, 1000);

但是请注意，每次调用都会启动一个新的间隔，您不希望有多个间隔运行调用同一个函数

因此，在函数外部调用

setInterval

，或将

setInterval

替换为

setTimeout

。Timeout将调用函数一次，函数将创建新的Timeout等等

编辑： 同时，for循环在一瞬间遍历所有位置。但是你想把它移动一个位置

我会这样做：

var slide = document.getElementById("slider-1");
var slideWidth = 320;
var backPosY = 0;
var backPosX = 0;
var sliderEnd = 960;
var f = backPosX;
function slider1(){
    slide.style.backgroundPosition = "-"+f+"px "+backPosY+"px";
    f+=slideWidth;
    if(f >= sliderEnd)
        f = backPosX;
}
setInterval(slider1, 1000);

编辑2：此代码可用于多个滑块：

function moveSlider(slide){ // Slide is now a function parameter
    var slideWidth = 320;
    var backPosY = 0;
    var backPosX = 0;
    var sliderEnd = 960;
    if(!slide.slidePosition)    // If there isn't slidePosition in the element
        slide.slidePosition = backPosX; // Initialize it
    slide.slidePosition+=slideWidth;
    if(slide.slidePosition >= sliderEnd)    //
        slide.slidePosition = backPosX;
    slide.style.backgroundPosition = "-"+slide.slidePosition+"px "+backPosY+"px";
}

function startSlider(slide){    // Start slider's interval
    return setInterval(function(){
        moveSlider(slide);
    }, 1000);
}

function stopSlider(intervalId){    // setInterval return ID which you can use to stop the interval
    clearInterval(intervalId);
}

然后，您可以使用以下选项启动滑块：

startSlider(document.getElementById("slider-1"));

请注意，我需要将参数传递给

moveSlider

。因此，我包装在另一个函数中，它不接受任何参数，并使用slider作为参数调用

moveSlider

。这个代码示例可以稍微解释一下：

function slide1(){
    ...
}
// Can be also written as:
slide1 = function(){
    ...
}

---

我刚刚删除了中间人

slide1

并直接传递了它。

setInterval

将函数作为第一个参数，但您传递了

slider1（）

括号表示调用函数，因此您正在调用
slider1
，并将函数调用的返回值传递给
setInterval

在您的情况下，
slider1
不返回任何内容，这意味着
setInterval
接收的是
未定义的
，而不是您的函数

您需要传递函数本身，而不是函数调用的结果

setInterval(slider1, 1000);

但是请注意，每次调用都会启动一个新的间隔，您不希望有多个间隔运行调用同一个函数

因此，在函数外部调用
setInterval
，或将
setInterval
替换为
setTimeout
。Timeout将调用函数一次，函数将创建新的Timeout等等

编辑：
同时，for循环在一瞬间遍历所有位置。但是你想把它移动一个位置

我会这样做：

var slide = document.getElementById("slider-1");
var slideWidth = 320;
var backPosY = 0;
var backPosX = 0;
var sliderEnd = 960;
var f = backPosX;
function slider1(){
    slide.style.backgroundPosition = "-"+f+"px "+backPosY+"px";
    f+=slideWidth;
    if(f >= sliderEnd)
        f = backPosX;
}
setInterval(slider1, 1000);

编辑2：此代码可用于多个滑块：

function moveSlider(slide){ // Slide is now a function parameter
    var slideWidth = 320;
    var backPosY = 0;
    var backPosX = 0;
    var sliderEnd = 960;
    if(!slide.slidePosition)    // If there isn't slidePosition in the element
        slide.slidePosition = backPosX; // Initialize it
    slide.slidePosition+=slideWidth;
    if(slide.slidePosition >= sliderEnd)    //
        slide.slidePosition = backPosX;
    slide.style.backgroundPosition = "-"+slide.slidePosition+"px "+backPosY+"px";
}

function startSlider(slide){    // Start slider's interval
    return setInterval(function(){
        moveSlider(slide);
    }, 1000);
}

function stopSlider(intervalId){    // setInterval return ID which you can use to stop the interval
    clearInterval(intervalId);
}

然后，您可以使用以下选项启动滑块：

startSlider(document.getElementById("slider-1"));

请注意，我需要将参数传递给
moveSlider
。因此，我包装在另一个函数中，它不接受任何参数，并使用slider作为参数调用
moveSlider
。这个代码示例可以稍微解释一下：

function slide1(){
    ...
}
// Can be also written as:
slide1 = function(){
    ...
}

我刚刚删除了中间人
slide1
并直接传递了它。
您能在
for
循环中创建JSFIDLE PLease吗您基本上是一次执行所有操作。您需要在for循环中设置间隔。您可以在
for
循环中创建jsfiddle吗？您基本上是一次执行所有操作。您需要在for循环中设置间隔。好的，我去掉括号并在函数外设置，但仍然在最后一个图像/位置停止。你能澄清一下在这种情况下如何使用setTimeout吗？对不起，我没有解决你的代码所遇到的所有问题。我编辑了答案。谢谢。尝试了您的代码，现在在第一个图像/位置停止。我不能在函数中定义变量吗？我会在页面上有多个滑块，每个都有不同的位置值。是的，我犯了一个错误。我编写了f++而不是f+=sliderWidth。你需要把f存储在某个地方。如果它在函数内部，它将在函数开始时创建，在函数结束时销毁。所以你需要把它保存在一个可以保存的地方。您可以做的一件事是将它放在slider元素中。slide.slidePosition=0。我将编辑的答案，以便它将支持多个滑块。好的，我删除括号并设置在函数之外，但仍在最后一个图像/位置停止。你能澄清一下在这种情况下如何使用setTimeout吗？对不起，我没有解决你的代码所遇到的所有问题。我编辑了答案。谢谢。尝试了您的代码，现在在第一个图像/位置停止。我不能在函数中定义变量吗？我会在页面上有多个滑块，每个都有不同的位置值。是的，我犯了一个错误。我编写了f++而不是f+=sliderWidth。你需要把f存储在某个地方。如果它在函数内部，它将在函数开始时创建，在函数结束时销毁。所以你需要把它保存在一个可以保存的地方。您可以做的一件事是将它放在slider元素中。slide.slidePosition=0。我将编辑的答案，以便它将支持多个滑块。