Image Slideshow "sliding/scrolling" look

[ProgramPotato]

I have this code I'm using for a slideshow;

<div id="thepic" valign="center"><input type="image" src="ArrowLeft.png" value="<" onclick="move('down')" id="left"/><input type="image" src="ArrowRight.png" value=">" onclick="move('up')" id="right"/></div><input type="image" src="Stop.png" value="stop" onclick="pause()" id="stop" /><script type="text/javascript">var pics=["Placeholder.png", "Placeholder.png", "Placeholder.png", "Placeholder.png"];function move(dir){if(timer){clearTimeout(timer)}if(dir=="down"){pics.unshift(pics.pop())} if(dir=="up"){pics.push(pics.shift()) }timer=setTimeout(function (){move(dir)}, 3000)document.getElementById("thepic").style.backgroundImage="url("+pics[0]+")";}var timer=setTimeout(function (){move("up")}, 3000) function pause(){clearTimeout(timer);}</script>

I would like the slideshow to have a sliding effect (like when you slide through images on an iOS device) when it plays through the images. I know this is possible but i'm not sure how to do that. Also, it starts out blank and then displays the second image (skipping the first). How can i make this not happen? Thanks!

[ProgramPotato]

Anyone?

[ProgramPotato]

Anyone?

[justsomeguy]

You can roll your own animation if you want to using setTimeout to move the image by a little bit every interval, or you can use an animation library like you would find in jQuery or Sencha to do the heavy lifting for you. It skips the first image because you never tell it to display that one, the first thing you do is tell it to move either up or down.

[ProgramPotato]

You can roll your own animation if you want to using setTimeout to move the image by a little bit every interval, or you can use an animation library like you would find in jQuery or Sencha to do the heavy lifting for you. It skips the first image because you never tell it to display that one, the first thing you do is tell it to move either up or down.

I got it to display the first image, but there is still a pause in the beginning. I don't know how to get the rolling effect

[justsomeguy]

There are several examples online, but the things you need to do are to figure out the current position of the image element on the page, determine the position where it should be, determine how much you want to move it (this will partly determine the animation speed), and then move it. You do that several times a second using setTimeout to keep moving it by a little bit until it gets to where you want it to go. The number of times you run that per second and the amount that you move it each time will determine the speed at which it moves. You can find examples for each of those tasks online.