DHTML slide show program (1)

Author：Eve Cole Update Time：2009-06-20 17:00:35

This is a slide show program, which is a program that plays pictures in turn. We can see this form of advertising playback bars on some sites, most of which are made with CGI, which means that the server must support CGI programs, such as ASP, PHP, Perl, etc. But our implementation method here does not require CGI, it only uses CSS effects, plus JavaScripts control. As long as your browser is IE 4.0 or above or Netscape 3.0 or above. It’s just that here we use the CSS Filter effect, which can only appear in IE. For information about the filter effects of CSS, you can refer to my "Detailed Explanation of Filters in CSS", which has been published on Yesky.com.
Okay, let's do some preparations.

First of all, in order to create this effect, we first need to make several pictures of the same size and let them play in turn. For example, I found the following three 88x31 pictures as the images used.

Secondly, let us review the knowledge of the image conversion filter of Filter in CSS:

Display transform filter in CSS

The display transformation filter provides a more varied transformation effect. Unlike the hybrid transformation filter, which only provides a fade-in and fade-out effect, it also provides more image transformation effects. Its syntax is:

Filter: RevealTrans (duration = number of seconds to convert, transition = conversion type)

As you can see, it has a conversion type parameter. Here, it provides 24 conversion types. We only need to specify the code name of the conversion type to convert the image according to the unique conversion effect. The following table shows the 24 conversion filter forms and their corresponding codes:
Display the code the conversion form of the conversion filter.

the code corresponding to	the conversion form of the conversion filter.	Display	corresponding to
Rectangle from large to small	0	randomly dissolve	12
rectangle from small to	large 1	split vertically inward	13
circle from large to small	2	vertical Split outward	14
Round Small to large	3	Split horizontally inward	15
Push upward	4	Split horizontally outward	16
Push downward	5	Peel left and downward	17
Push right	6	Peel upward left	18
Push left Open	7	Peel down to the right	19
Vertical blinds	8	Peel up and right	20
Horizontal blinds	9	Random horizontal fine lines	21
Horizontal checkerboard	10	Random vertical fine lines	22
Vertical checkerboard	11	Randomly select a special effect	23