如何使用javascript函数制作图像滑块

时间:2014-12-15 21:30:41

标签: javascript php pdo

我想从数据库制作基本图像滑块。我可以获取并显示图像,我也可以使用按钮获取上一个下一个图像。我想自动更改图像但是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;
}

};

0 个答案:

没有答案