Myfocus How to use

1, in the HTML tag to introduce the relevant documents

<script type="text/javascript" src="js/myfocus-2.0.0.min.js"></script><!--引入myFocus库--> <script type="text/javascript" src="js/mf-pattern/slide3D.js"></script><!--引入风格js文件--> <link href="js/mf-pattern/slide3D.css" type="text/css" /><!--引入风格css文件-->



2. Create a Myfocus standard HTML structure and populate your content

<div id="boxID"><!--焦点图盒子--> <div class="loading"></div><!--载入画面(可删除)--> <div class="pic"><!--内容列表(li数目可随意增减)--> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul> </div></div>


Description of the properties of the IMG tag:

• SRC: Image address;

• Thumb: The image of the thumbnail address (need style support, can be omitted, if omitted, the large map address as its address);

• alt: Descriptive text of the picture;

• Text: Picture more detailed description text (need style support, can omit)

3. Call anywhere after the STEP1 code (recommended to be called before the head tag ends)

//你可以简单的调用---只设置它的盒子id，其它参数全部默认设置：<script type="text/javascript">myFocus.set({id:‘boxID‘});</script>//或详细一点的参数调用：<script type="text/javascript">myFocus.set({ id:‘boxID‘,//焦点图盒子ID pattern:‘mF_fancy‘,//风格应用的名称 time:3,//切换时间间隔(秒) trigger:‘click‘,//触发切换模式:‘click‘(点击)/‘mouseover‘(悬停) width:450,//设置图片区域宽度(像素) height:296,//设置图片区域高度(像素) txtHeight:‘default‘//文字层高度设置(像素),‘default‘为默认高度，0为隐藏});</script>


！！！


In fact, style files do not need to be introduced manually when using, Myfocus will find the Mf-pattern directory under the Myfocus library file directory According to your pattern settings, and automatically introduce when the corresponding style file is found.

In this way, you only need to put your style file in the Myfocus library file directory in the Mf-pattern directory, you can implement the automatic introduction mechanism.

For example, your myfocus-2.0.0.min.js file is placed in the JS directory, so just create a mf-pattern subdirectory within the JS directory, which is the directory where the Myfocus program can identify the style files.

In the Mf-pattern directory, there is also an IMG subdirectory, it is to store some style of image files, although not every style will have a picture file.

It is recommended that you store all the style files in this Mf-pattern directory so that you can switch your style freely, and that it is loaded on demand and does not introduce any additional files. The entire load of Myfocus (main library + style) averages only about 12KB.

It is also necessary to note that the automatic introduction mechanism has been done enough intelligence, it does not repeat the introduction of style files, such as when you have manually introduced style files, or simply write a style of JS code on the page, then Myfocus will not look for the introduction of style files, but directly read the page.

地址：http://demo.jb51.net/js/myfocus/tutorials.html

 

 






Myfocus How to use