Website Instruction

This website is pure HTML+CSS+javascript website.

Technology stack

HTML:

CSS: Box Model, Web-font,Icons, Box float

Preview: home page

https://github.com/tianlinjill/Online-Sale-website/blob/main/upload/HomePage.PNG

Preview: phone sale page

https://github.com/tianlinjill/Online-Sale-website/blob/main/upload/phonePage.PNG

Update information in 27/02/2021:

1. added a Throttle valve to control the animation, only after the animation finished users could do next animation.

Update information in 25/02/2021:

1.added new JavaScript to implemented main focus image change.

2.add scroll animation functions on main focus images

scroll animation algorithm:

step a) Clone the first image and appended to the last position.

step b) Once the current image is the cloned image. if click the arrow button to show the next picture, we do not use the animator, instead change the ul's left to zero. since it is really fast. customer would not notice!

Function achieved:

1. Mouse enter could show the arrow icons, mouse lease could hidden the arrow icons.

2. Circles would create by js and the number is according to the number of images.

3. Click the right arrow in focus image could make the current images move to left and show the next image, click the left arrow could make the current image move to right, and show the previous image.

4. Images could change automatically. mouseenter to the image would stop the image change, and mouse leave could make images continue change.

5. Circles changed according to the images change.

6. Click listed circles could control the image to move accordingly.