我想从数据库制作基本图像滑块。我可以获取并显示图像,我也可以使用按钮获取上一个下一个图像。我想自动更改图像但是setTimeOut不起作用。 我搜索了同样的问题,但他们没有解决我的问题。
这是我的js代码的一部分:
myslider = {
images : [],
i : 0,
t : 0,
f : false,
init : function(container) {
container.innerHTML += '<table width="50%" border="0" cellspacing="0" cellpadding="0" align="center" style="margin: 0 auto"><tr>'+
'<td><img src="slider/previous.png" value="Previous" onclick="myslider.previous()" /></td><td align="center">'+
'<img style="width:525px;height:200px;border:1px solid;border-radius:15px;" src="images/" alt="" id="slider_img" />'+
'</td><td><img src="slider/next.png" value="Next" onclick="myslider.next()" /></td></tr></table>';
},
start : function() {
if(this.i>=this.images.length){
this.i=0;
document.getElementById('slider_img').src=this.images[this.i];
this.i++;
}
else{
document.getElementById('slider_img').src=this.images[this.i];
this.i++;
}
this.t=setTimeout("start()", 1000);
},
play : function() {
if(this.f==false){
this.f=true;
this.start();
}
},
stop : function() {
clearTimeout(this.t);
this.f=false;
},
next : function() {
if(this.i>=this.images.length){
this.i=0;
document.getElementById('slider_img').src=this.images[this.i];
this.i++;
}
else{
document.getElementById('slider_img').src=this.images[this.i];
this.i++;
}
},
previous : function() {
if(this.i>=this.images.lenght){
this.i=this.images.length;
document.getElementById('slider_img').src=this.images[this.i];
this.i--;
}
else if(this.i<=0){
this.i=this.images.length;
document.getElementById('slider_img').src=this.images[this.i-1];
this.i--;
}
else if(this.i>this.images.length){
document.getElementById('slider_img').src=this.images[this.images.length-this.i];
}
else if(this.i<=this.images.length || this.i>0){
document.getElementById('slider_img').src=this.images[this.i-1];
this.i--;
}
},
setImages : function(images) {
for(var i=0 ; i<images.length ; i++)
this.images[i] = images[i].imageurl;
}
};