Jump to content

Javascript Horizontal Scrollers


moin_netset
 Share

Recommended Posts

Hi everyone I have been reading this for weeks now it has solved lot of my brain racking of the question "How"I have visited lot a of websites and found an horizontal image scroller which *automatically move on image in one direction*but when the mouse is moved on the horizontal scroller it follows the direction of the mouse, *some even enlarge on mouseover event and *also have facility of forward and backward button *along with the hyperlink to each image for days I have been banging my head, how to make such a horizontal scroller with all the features in itI need your Expertise If anyone can help kindly reply me

Link to comment
Share on other sites

It's a whole lot to program but is composed of a lot of simpler actions.In order to do this properly, use addEventListener() and attachEvent() rather than "onmousemove" or "onmouseover".

  • Automatically move on image in one direction:You would use setTimeout or setInterval to update the position of the element on each instant
  • But when the mouse is moved on the horizontal scroller it follows the direction of the mouse:You use the mouseover event to activate this mode with a boolean variable. Then use the mousemove event to detect which way the mouse has moved and move the scroller with it.
  • Some even enlarge on mouseover event:That's quite simple: update the size when the mouse is over, revert it when the mouse goes out.
  • Also have facility of forward and backward button:Buttons are easier to program than tracking the mouse. You need to just use setInterval or setTimeout to run a function that keeps updating the position after a mousedown event and to deactivate it after the mouseup event.
  • Along with the hyperlink to each image:A hyperlink is nothing more than an HTML element, it's the simplest part to make.

Link to comment
Share on other sites

It's a whole lot to program but is composed of a lot of simpler actions.In order to do this properly, use addEventListener() and attachEvent() rather than "onmousemove" or "onmouseover".
  • Automatically move on image in one direction:You would use setTimeout or setInterval to update the position of the element on each instant
  • But when the mouse is moved on the horizontal scroller it follows the direction of the mouse:You use the mouseover event to activate this mode with a boolean variable. Then use the mousemove event to detect which way the mouse has moved and move the scroller with it.
  • Some even enlarge on mouseover event:That's quite simple: update the size when the mouse is over, revert it when the mouse goes out.
  • Also have facility of forward and backward button:Buttons are easier to program than tracking the mouse. You need to just use setInterval or setTimeout to run a function that keeps updating the position after a mousedown event and to deactivate it after the mouseup event.
  • Along with the hyperlink to each image:A hyperlink is nothing more than an HTML element, it's the simplest part to make.

thank you I have started working on your guidelinesbut still I dont have indept knowledge of javascriptI might need some more knowledge from you
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...