There are a lot of blind flash plug-ins written on the Internet, similar to pure js. However, after reading a few plug-ins, I feel very complicated, and some of them are encrypted. Therefore, when I want to use it myself, it will be a little painful to study it. As a result, I wrote a plug-in with jquery, hoping to share and learn with you.
[Html]
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> untitled document </title>
<Link type = "text/css" rel = "stylesheet" href = "../Css/jalousie.css"/>
<Script type = "text/javascript" src = "js/jquery1.6.1.js"> </script>
<Script type = "text/javascript" src = "../Js/Jquery. x. js"> </script>
<Script type = "text/javascript">
/* -- This is the call method. This can be placed in a separate js file --*/
$ (Function (){
$ ('# Outer'). flashShow ({
Isbg: false,
Space_x: 14,
Space_y: 4
});
});
</Script>
</Head>
<Body>
<Ul class = "outer" id = "outer">
<Li> </li>
<Li> </li>
<Li> </li>
<Li> </li>
<Li> </li>
</Ul>
</Body>
</Html>
Configurable attributes
[Html] www.2cto.com
Var defaults = {
Space_x: '10', // small square in column x. The value of x * y should not be too large.
Space_y: '5', // small square in column y. The value of x * y should not be too large.
Isbg: false, // whether the image is displayed as a background image in the container
ListClass: 'LIST' // the style of the Image number list
}
A Simple plug-in.
Implement the basic flash switching function and be compatible with various browsers.
The disadvantage is that it is not optimized.
Some browsers may be stuck.
[Plain]
Style File: jalousie.css
Js plug-in file: Jquery. x. js
In the style file, I have made some detailed descriptions for each style. When referencing and modifying the style file, you can view the code comments in the style file.