Firstly, we need two block elements, one static and another that will move inside the static element. We will call the static element "holder" and the moving element "slider". Inside the slider, we will put our content, in this case three images of equal size of 100px by 100px.
<div id="holder">
<div id="slider">
<img src="/graphics/learning_zone/num_pics/one.jpg" />
<img src="/graphics/learning_zone/num_pics/two.jpg" />
<img src="/graphics/learning_zone/num_pics/three.jpg" />
</div>
</div>
We will then define some parameters for the holder so that it displays only the area we want. Its not necessary to define styles for the slider unless you plan it to behave differently.
<style type="text/css">
#holder{
width:101px;
height:101px;
overflow:hidden;
}
</style>
Finally, we define the javascript function and some additional prams.
<script type="text/javascript">
//settings
height = 101;
max_margin = -202;
//the following global variables need to be outside
//the function as their values need to be retained
current_margin = 0;
direction = "up";
//initailly call the slide function
slide();
function slide(){
//calculate
if (direction == "up") current_margin -= height;
else current_margin += height;
//now we animate the slider
$("#slider").animate({
marginTop: current_margin + "px"
}, 1500 );
//change direction if top or bottom is reached
if (current_margin == max_margin) direction = "down";
if (current_margin == 0) direction = "up";
setTimeout("slide()",3000);
}
</script>
This is a very tricky subject and there seems to be many ways to get around the problem. The solution however is not suitable for every browser and the work-around is usually tedious.
Usually you would do something like this:
<div style='text-align:center;'>
<img src="your_image.jpg" style='vertical-align:middle;' />
</div>
This is where you'd ususally run into trouble because the above code will always fail to align vertically. The solution to this problem is actually extremely simple but not often to resolve this particular problem. And how is it done? well.. we will ditch the IMG tag alltogether and use ONLY the div tag and some basic css.
#image_DIV{
height:200px;
width:200px;
background-image:url(/graphics/learning_zone/num_pics/five.jpg);
background-position:center;
background-repeat:no-repeat;
border:1px solid #06C;
}
Does the above code look familier? of course it does - we use code like that all the time. I've done it like this for clarity. You can put the entire css code inside the Style attribute of your DIV if you want as it will give you much more flexibility.
<div id="image_DIV"></div>