Images left/right scroll script

In this tutorial you will learn how to scroll the image from left to right and vice versa by clicking and holding down the scroll buttons.

image scrolling

This setup uses a <div> tag with a picture inside. The image is sized 100 x 100 pixels for each; the division viewpoint is set to 210 x 120 pixels. You need to set overflow:hidden in order to hide all images and horizontal scrollbar to be displayed.

When a button is pressed and held down, either function ScrollLeft() or ScrollRight() is called to start a timer and scroll the division by +4 or -4 pixels every 5 milliseconds. When the button is released, you need to clear the timer in order to prevent the division to be continued scrolling.

Works Fine In All Web Browser

I have tested this on IE7, Opera, Safari and Firefox 3.0 on PC and it works great. IE6 will have little problem on the image button issue, there will have border appear on the image if the image is used for linking purpose, it is inside anchor tag <a>…</a>.

My Coding Part

<script type=”text/javascript”>

var Timer;

function ScrollLeft()

{

Timer = setInterval(“document.getElementById(’panorama’).scrollLeft -= 4?, 5); //you can set the scrollLeft value greater or less than 4, greater means faster scrolling, lesser means slower

//you are recommended set it to 5, 10 milliseconds…the response will be slower if set it higher

}

function ScrollRight()

{

Timer = setInterval(”document.getElementById(’panorama’).scrollLeft += 4?, 5);

}

</script>

<div id=”panorama” style=”width:210px; height:120px;overflow:hidden”>

<table>

<tr>

<td>

<img src=”image1.gif” style=”width:100px”/>

</td>

<td>

<img src=”image2.gif” style=”width:100px”/>

</td>

<td>

<img src=”image3.gif” style=”width:100px”/>

</td>

<td>

<img src=”image4.gif” style=”width:100px”/>

</td>

<td>

<img src=”image5.gif” style=”width:100px”/>

</td>

</tr>

</table>

</div>

<div style=”width:210px; text-align:center”>

<a href=”#” style=”color:white”> <!-set the href=”#” so that you can have smooth scrolling - - >

<img src=”prev.gif” onmousedown=”ScrollLeft()” onmouseup=”clearInterval(Timer)”></a>

<a href=”#” style=”color:white”> <!-IE6 will have minor issue on image button — ->

<img src=”next.gif” onmousedown=”ScrollRight()” onmouseup=”clearInterval(Timer)”></a>

</div>

---------------------------------------------------------------------------------------------------------------------------------------

For auto scroll images in asp.net use obout suite controll..

for details see this link :http://www.obout.com/show/show_transition_scrolling_left.aspx