CODEWITHSUNDEEP
javascriptjquery
samy
samy

Reputation: 1969

changing background image with a for loop

i have a table with 3 cells the middel 1 in a black image so it will look like there is a line in the middle of the screen. now in the other cell i want to show pictures, so i tryed to do a loop that changing the images every second with by hiding the cells and then show them.

the script:

$(window).ready(function () {

//the images sits in a div with a hidden property.
var AlumniumPictures = $("#AlumnimPictureHolder").children();
var ShipozimPictures = $("#ShipozimPictureHolder").children();

//var timer = $.timer(yourfunction, 10000);

for (var i = 0; i < 10; i++) {


    $(".almoniyomButtonTD").css({
        "background-image": "url(" + $(AlumniumPictures[i]).attr('src') + ")"
    });

    $(".shipozimButtonTD").css({
        "background-image": "url(" + $(ShipozimPictures[i]).attr('src') + ")"
    });

    $(".almoniyomButtonTD").hide();
    $(".shipozimButtonTD").hide();


    $(".almoniyomButtonTD").show(1100);
    $(".shipozimButtonTD").show(1100);

   //for some reson the code dosnt work if im not using the setInterval method.
   document.setInterval(1000);


}

});

this is not working it only show me the first images and then stop. is there a batter way to do this? am im doing this right?

Upvotes: 0

Views: 915

Answers (2)

user898741
user898741

Reputation:

I think you might do this for the background:

$(window).ready(function () {
    //the images sits in a div with a hidden property.
    var AlumniumPictures = $("#AlumnimPictureHolder").children();
    var ShipozimPictures = $("#ShipozimPictureHolder").children();

    //var timer = $.timer(yourfunction, 10000);

    time = 0;
    step = 1000; // One secund
    for (var i = 0; i < 10; i++) {
        time+= step;
        $(".almoniyomButtonTD").hide();
        $(".shipozimButtonTD").hide();

        $(".almoniyomButtonTD").show(1100);
        $(".shipozimButtonTD").show(1100);

        //for some reson the code dosnt work if im not using the setInterval method.
        document.setInterval("changeBG('" + $(AlumniumPictures[i]).attr('src') + "', '.almoniyomButtonTD')", time);
        document.setInterval("changeBG('" + $(AlumniumPictures[i]).attr('src') + "', '.shipozimButtonTD')", time);
    }
});

function changeBG(image, obj) {
    $(obj).css({
        "background-image": "url(" + image + ")"
    });
}

But I don't undestand what you want to do with this:

$(".almoniyomButtonTD").hide();
$(".shipozimButtonTD").hide();

$(".almoniyomButtonTD").show(1100);
$(".shipozimButtonTD").show(1100);

Upvotes: 1

mrtsherman
mrtsherman

Reputation: 39872

See the docs about setInterval. You need to tell it what code you are running. 

window.setInterval(code, delay);

You aren't specifying any code for it to run! Try placing your for statement in a function and calling that.

Also, from Mozilla and MS docs setInterval seems to be on the window object, not on the document object. I don't think it will work the way you have it. I imagine if you looked in a debugger you would see an error thrown. 

window.setInterval(myFunction, 1000);

function myFunction() {
 for (var i = 0; i < 10; i++) {
   $(".almoniyomButtonTD").css({
     "background-image": "url(" + $(AlumniumPictures[i]).attr('src') + ")"
   });

   $(".shipozimButtonTD").css({
     "background-image": "url(" + $(ShipozimPictures[i]).attr('src') + ")"
   });

   $(".almoniyomButtonTD").hide();
   $(".shipozimButtonTD").hide();

   $(".almoniyomButtonTD").show(1100);
   $(".shipozimButtonTD").show(1100);
 }
}

Upvotes: 0

Related Questions