Hello, dear friend, you can consult us at any time if you have any questions, add WeChat: daixieit

Slideshow

Prepare your HTML and CSS

Create a web page (HTML and CSS) that looks like the mockup below. You can use the images in this zip-file in your slideshow, or you can use your own. See e.g. CSS Triangle for tips on how to create triangles using just CSS and HTML.

· Create a folder for the assignment and a sub-folders for each exercise/task.

Task 1

Make the slideshow interactive! Implement the following interaction using a combination of JavaScript, HTML and CSS:

1. Make the left and right triangles react when the user hovers above them with the mouse cursor. You could e.g. change the opacity, the color, the size etc.

2. Change the shape of the mouse cursor into a hand - this helps the user understand that he or she can click on a triangle.

3. Change the image shown in the middle square when the user clicks on the buttons. The slideshow should loop, i.e. when the user clicks “show next image” and the last image is being shown, the slideshow should look and show the first image.

Task 2

Add a semi-opaque box that contains the title or a description of the currently shown image. See mockup below.

Task 3

· Add thumbnails of all the images in the slideshow below the main slideshow image.

· Add a highlight (e.g. a white frame or a change in opacity etc) to the thumbnail of the image that is currently shown.

See the mockup below.

Restrictions

· Write your JavaScript in a separate file. I.e. not inside you HTML file.

· You are not allowed to any of the HTML event attributes (e.g. onclick). Using these attributes is fine for small scripts, but the point of this assignment is for you to learn things that will help you ahead.

· Instead, add your event handlers in your JavaScript code.

Storing image location data

Make the script easy to modify so that more/less images can easily be added or removed. You can e.g.

· define images source locations to use in your JavaScript file

· add the all images to use to the HTML, but have CSS make them invisible (display: none) and find them using JavaScript (the alt attribute can be used for the description too)