XHTML structure:
Copy codeThe Code is as follows:
<Div id = "myFocus-wrap">
<Div id = "myFocus">
<! -- Focus graph box -->
<Div class = "loading">
<Span> Please wait... </span> </div>
<! -- Load the screen -->
<Ul class = "pic">
<! -- Content list -->
<Li> <a href = "#">
</a> </li>
<Li> <a href = "#">
</a> </li>
<Li> <a href = "#">
</a> </li>
<Li> <a href = "#">
</a> </li>
</Ul>
</Div>
</Div>
Introduce the myFocus version of js and pay attention to the order when introducing js, because this is related to the order of js loading on the page:
Copy codeThe Code is as follows:
<Script src = "js/flash/myfocus-1.0.4.full.js" type = "text/javascript"> </script>
<Script src = "js/flash/mF_slide3D.js" type = "text/javascript"> </script>
<Link href = "js/flash/mF_slide3D.css" rel = "stylesheet" type = "text/css"/>
Note: The slide3D effect Demo is used here. For details about other effects, refer to the official website:
Http://www.cosmissy.com/myfocus/demo.html
Javascript:
Copy codeThe Code is as follows:
<Script type = "text/javascript">
Var mf = myFocus; // abbreviation
Var param = {
Id: "myFocus ",
Pattern: "mF_slide3D ",
Time: 5, // switch Interval
Trigger: 'click', // trigger mode: click-click mouseover-Hover
Width: 960/1, // area width
Height: 465/1, // region height
TxtHeight: 0/1, // text layer height (0 is hidden)
// TxtWidth: 62/1, // The field width (68-moderate/82-wide/32-narrow)
Auto: true, // whether to play automatically
Wrap: false, // whether to bring a border
Index: 0/1, // the sequence in which the image is displayed. (0 indicates the first image, which cannot exceed the total number)
Delay: 100/1, // the delay time in mouseover mode. Unit: milliseconds (0-no delay)
// Additional parameters
Speed: 120, // The speed of motion (the greater the number, the slower the speed)
Direction: 'left', // direction of motion: left top right bottom
Easing: 'easeinout', // motion form: easeOut-fast-out slow-In easeIn-Slow-fast-In easeOut-Slow-out slow-in-linear-constant speed
Less: 1, // whether seamless 1-0-No
// Chip: 10, // Number of image slices (effective only when the image can be divisible by the height) (8/10/16)
Type: 4, // slice effect: 1-head 2-tail 3-coagulation 4-Random Effect
Gray: 0/1 // whether the current image is grayed out. 1-0-No
}
MyFocus. set (param, true );
// Shield IE execution error
Window. onerror = function () {return true };
</Script>
For other effects and documents, see the official website blog:
Http://www.cosmissy.com/myfocus/demo.html
Latest Version of myFocus all v1.1.0 (2010.12.15 updated)
Demo address: http://demo.jb51.net/js/myfocus/index.html
Package download: http://www.jb51.net/jiaoben/33989.html