First made one using canvas, but ExplorerCanvas didn't like the it. https://developer.mozilla.org/en/Canvas_tutorial/Basic_animations http://excanvas.sourceforge.net/
Source Image http://commons.wikimedia.org/wiki/File:Capitan_Meadows,_Yosemite_National_Park.jpg So next I did it using jQuery, here is my result. Tested in FF3, IE6/7. Would have been easy to do except for the ugly IE css hacks. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml";> <html> <head> <script src="jquery-1.2.6.js"></script> <script> $(document).ready(function(){ var speed = 30000; $("#left").click(function () { runA(); runB(); }); function runA() { $("#blockA").animate({"left": "-=1024px"}, speed, "linear"); $("#blockA").animate({"left": "+=2044px"}, 1, "linear"); $("#blockA").animate({"left": "-=1024px"}, speed, "linear",runA); } function runB() { $("#blockB").animate({"left": "-=1024px"}, speed, "linear"); $("#blockB").animate({"left": "-=1024px"}, speed, "linear"); $("#blockB").animate({"left": "+=2044px"}, 1, "linear",runB); } }); </script> <style> img { padding: 0; margin: 0; } div#t { overflow:hidden; width:800px; height:198px; word-wrap: break-word; } #blockA, #blockB { position:absolute; } #blockB { left:1023px; } #wrapper { height: 100%; width: 800px; overflow: hidden; border: 3px solid; /* this is just for debugging, to see if the browser actually does something sane */ position: relative; } </style> </head> <body> <button id="left">«</button> <div id="wrapper"> <div id="t"> <img id="blockA" src="Capitan_Meadows,_Yosemite_National_Park.jpg" /> <img id="blockB" src="Capitan_Meadows,_Yosemite_National_Park.jpg" /> </div> </div> <br /> <br /> <img src="Capitan_Meadows,_Yosemite_National_Park.jpg" /> </body> </html>
