Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations bkrike on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

scrolling images right to left

Status
Not open for further replies.
beco73

beco73

Programmer
May 8, 2005
157
CA
Hi,

Is it possible to scroll images right to left using javascript.

Just like here
instead of text like they are doing, I want to sroll images...

Thanks
 
Sort by date Sort by votes
Yes - perfectly possible.

You would use setTimeout or setInterval to call a function every few hundred milliseconds or so, which changed the top or left style property of the image (or image container) that you wanted to scroll.

Check out for lots of scroller examples... or have a crack at building your own.

Hope this helps,
Dan



[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
This is off the top of ma head, also it is started by clicking anywhere on the document body

i hope this might help.

Code: 
<html>
<head>
<script language='javascript'>
PreloadImg = function (name)
	{
        var img = new Image();
        img.src = name;
        return img;
	}
var img_1 = PreloadImg('[URL unfurl="true"]http://www.stanford.edu/group/sas/images/icon.gif');[/URL]

CreateImg = function (_parent,src)
	{
	var img = document.createElement('IMG');
        var wid = parseInt(bdy.clientWidth);
        img.src = src;
	img.style.position = 'absolute';
        img.style.left = wid-parseInt(img.width);
        _parent.appendChild(img);
	return img;
	}


</script>
</head>
<body onmousedown='MoveImg()'>
<script language='javascript'>
var bdy = document.getElementsByTagName('BODY')[0];
Floater = CreateImg(bdy,img_1.src);
var Jump = 1;
var IntVal = 300;
MoveImg = function ()
	{
 	var x  = parseInt(Floater.style.left); 
            wid= parseInt(bdy.clientWidth);
        if ((x>10)&&(x<=wid))
	   {
           x -= Jump;
	   Floater.style.left =x;
   	   setInterval('MoveImg()',IntVal);		
	   }
	}
</script>
</body>
</html>

---------------------------
Join Or Participate in my project...
 
Upvote 0 Downvote
dynamic drive has lot of scroller but not image scroller.

I tried your code it works.

I put setinterval function. I don't how to continue scrolling , here it stops after once.
 
Upvote 0 Downvote
Try changing 45 to a higher value say 300. remember u r dealing with milliseconds so u will have to change that.

[red]also[/red] u will have to set this to an event after the window has properly loaded. Calling it the way u did in that test page can give unexpected results. u get me?

Code: 
[red]setInterval("MoveImg()",45)[/red]


---------------------------
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Kennelbloke
  • Locked
  • Question
Can't Get Markers to show on Map
Replies
0
Views
1K
Kennelbloke
Kennelbloke
lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
811
lexer
lexer
jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
925
xwb
xwb
Rayj0000
  • Locked
  • Question
How to disable an html button for subsequent website visitors?
Replies
0
Views
688
Rayj0000
Rayj0000
penguinspeaks
  • Locked
  • Question
How do I pass a classic asp variable to JS
Replies
1
Views
1K
xwb
xwb

Part and Inventory Search

Sponsor

Back
Top