jQuery image rotate to replicate an animated gif

I need to recreate an animated gif that i own, in jQuery that would sequence through the images and repeat continuously.

so i have these images

<img src="1.png" />
<img src="2.png" />
<img src="3.png" />
<img src="4.png" />

There is no action required it should load on page start.

How is this achieved ?

note: i plan to use this on mobile devices, hence why i am not just calling the gif directly.

Thanks 开发者_StackOverflow中文版in advance ! :)

Spritely should do the trick. For example, put the four images, one after another in the same image, centered on their own 100px wide section, making the single image 400px wide, then:

CSS

#sprite { width:100px; height:100px; background:#fff url('sprite.png') 0 0; }

JS

$('#sprite').sprite({fps: 12, no_of_frames: 4});