Question

!
The pictures scroll from left to right, when it hover on the middle of the area, it will become big as original, when it passed the middle position, it will be smaller and smaller and disappear.
Does any one know how to implement this work using javascript? any references would be appreciated.

Answer 1

You’re essentially asking for someone to explain to you how a lot of aspects of a Carousel work. The best options for that level of details would be for you to find one of the existing implementations and analyze them.

Conceptually the carousel behavior consists of:

1. Loading a number of images.
2. Adding event handlers to respond to mouse events.
3. Detecting certain mouse events and triggering the start of your scroll motion.
4. Creating an animation to show the motion that translates the images and change their size.
5. There are several different ways to animation and change size. This can be done with CSS3 or with jQuery’s animation library or with timers in plain javascript while manipulating the position and scaled size of the image.
6. Rotating new images into the view as the others scroll out.