[英]Simple pure javascript image slider
I'm trying to make the most simple image slider possibly in pure js, basically by changing the background position, but loop doesn't work at all.我试图用纯js制作最简单的图像slider,基本上是通过改变背景position,但循环根本不起作用。 I need to repeat the loop continuously.我需要不断地重复循环。
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);}
setInterval
takes function as first parameter, but you passed slider1()
. setInterval
将 function 作为第一个参数,但是您传递了slider1()
。
Parentheses means calling function so you are calling slider1
and passing to setInterval
only returned value of function call.括号表示调用 function 所以你调用slider1
并传递给setInterval
只返回 function 调用的值。
In your case slider1
does not return anything, that means that setInterval
receives undefined
instead of your function.在您的情况下, slider1
不返回任何内容,这意味着setInterval
接收undefined
而不是您的 function。
You need to pass the function itself, not results of its calling.您需要传递 function 本身,而不是其调用的结果。
setInterval(slider1, 1000);
But be aware that every call will start a new interval and you don't want to have multiple intervals running calling the same function.但请注意,每次调用都会开始一个新的间隔,并且您不希望有多个间隔运行调用相同的 function。
So call setInterval
outside of your function or replace setInterval
with setTimeout
.因此,在您的 function 之外调用setInterval
或将setInterval
替换为setTimeout
。 Timeout will call your function once and your function will create new timeout and so on.超时将调用您的 function 一次,您的 function 将创建新的超时等等。
Edit: Also your for loop loops through all positions in one moment.编辑:你的 for 循环也会在一瞬间遍历所有位置。 But you want to move it by one position.但是您想将其移动一个 position。
I would do it like this:我会这样做:
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);
Edit 2: This code can be used on multiple sliders:编辑 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);
}
You can then start slider with:然后,您可以使用以下命令启动 slider:
startSlider(document.getElementById("slider-1"));
Notice that I need to pass parameter to moveSlider
.请注意,我需要将参数传递给moveSlider
。 So I wrapped in another function doesn't take any parameters and calls moveSlider
with slider as parameter.所以我包装了另一个 function 不带任何参数,并以 slider 作为参数调用moveSlider
。 This code example can explain it a bit:这个代码示例可以稍微解释一下:
function slide1(){
...
}
// Can be also written as:
slide1 = function(){
...
}
I just removed the middle man slide1
and passed it directly.我只是去掉了中间人slide1
,直接通过了。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.