Rotate image by modifying css

Question

I want to rotate two images by modifying css, like so:

document.getElementById("id").style.backgroundImage = "url('image2.png')";
document.getElementById("id").style.backgroundImage = "url('image1.png')";

However, I need to do it on function call and four times only.

I've tried using setTimeout() method, however, it doesn't seem to do the job.

This is my current code that's being initialized by a click.

var d = new Date();
var n;
var i;

function flash() {
    n = d.getTime();
    var newTime = d.getTime();
    var called = 0;
    i = 0;
    while ((newTime - n) < 2000) {
        document.getElementById("i_count").innerHTML = i;
        if (!(i % 2) && (!called)) {
            called = 1;
            setTimeout("change_1()", 250);
            i++;
            called = 0;
        } else if ((i % 2) && (!called)) {
            called = 1;
            setTimeout("change_2()", 250);
            i++;
            called = 0;
        }
        newTime = d.getTime();
    }
}

function change_1() {
    document.getElementById("id").style.backgroundImage = "url('image2.png')";
    return;
}
function change_2() {   
    document.getElementById("id").style.backgroundImage = "url('image1.png')";
    return;
}

I was trying to utilize a timer instead of count in while loop, but it blocks the page and never loads. When I was using a counter in while loop, it incremented without called change_2() meaning the counter just incremented past stop condition.

I want to do a VERY (at least it sounds like) simple task, on click action rotate images for certain period of time and STOP.

... I've tried searching the net but in the past 2 hours all I've seen is continuous rotation.

Appreciate the help!

Changed the code to the following, however, I only get one cycle. The counter increments regardless of change_1 and 2 completion.

var i;

function flash() {
    i = 0;
    while (i++ < 10) {
        document.getElementById("i_count").innerHTML = i;
        setTimeout("change_1()", 250);
    }
};

function change_1() {
    document.getElementById("1").style.backgroundImage = "url('images/img_1.png')";
    setTimeout("change_2()", 250);
};

function change_2() {
    document.getElementById("1").style.backgroundImage = "url('images/img_2.png')";
};

Michael Lorton · Accepted Answer · 2013-01-26 02:10:29Z

1

Yeah, you're not even close.

You don't invoke the timeout again and again in a loop. change_1 should set a timeout to invoke change_2, and vice versa, with a counter to stop after four.

answered Jan 26, 2013 at 2:10

Michael Lorton

44.7k26 gold badges111 silver badges159 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Michael Lorton Over a year ago

You've still got that useless loop in the main function and you aren't invoking change_1 from change_2.

Yury Lankovskiy Over a year ago

What do you mean I'm not invoking the loop?

Michael Lorton Over a year ago

In the main function flash() you have a for loop. I don't know what you think it's doing, but it's not doing anything. Get rid of it. Look at the function change_2. It should have the line ` setTimeout("change_1()", 250);`.

Yury Lankovskiy Over a year ago

How do I decide when to stop the action?

Michael Lorton Over a year ago

I don't know how you would decide, but you could enforce your decision by having change_2 increment a global counter and stop invoking setTimeout when the count reaches some limit.

|

Collectives™ on Stack Overflow

Rotate image by modifying css

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related