Welcome to implementing a show

• [e-mail]
• Upper Secondary (Key Stage 4)
• BTEC

Slide show 

1. Understand how to create a simple slide show.

2. Implement it in your assignment 

3. Need help then message teacher in teams.

The  first step 

1.  Use a div tag  to insert all your images

2. Give your div tag an "id" Slideshow perhaps (You will need that later.

3. Give Your images a "class" you will need this for your Javascript later to transition between slides.

Got that!  Write it down on  a piece of paper for recall. 

Did it!  Good let us move on.

Formatting divs and images

Here we div tag   id= "slideshow"

Here we format the images= class="slides" (This is needed by Javascript)

Ok so far! look at previous lesson on layout to help with formatting divs if you are unsure.

Notice the absolute Position will be based on the inherited parent layout. 

Try it out!

When Javascript needs the images what would it refer to?

1. Slideshow
2. Slides
3. slide1
4. None of the above

How many images slides are there?

1. 1
2. 3
3. 2
4. 4

Where are the images file kept

What percentage of the div block or container is used by the images

1. 10%
2. 60%
3. 50%
4. 100%

How the slide show works

1.Here all the slide that is held in class called "slides"  are sent to variable called slides.

1. A function called "showslides" then goes through all the slides and blanks them all out.

2. The index then points to the first slide and displays it for 5 sec

3. The Function  "showslides" is called and it blanks all images out.

4. The index then points to the 2 nd images and displays it for 5 seconds.

5. The function " showslides" is callled and the whole thing repeats itself.

Got That!  I hope so!

function showslides(){ for i=0,i=slide.length,i++{slides{i}.style-opacity=0;
}}
Explain the function !

What Next!

Put some images in your assignment and create a slide show for one of your  pagess

Thank you

For learning with us