• <bdo id="g6euu"><blockquote id="g6euu"></blockquote></bdo>
    <bdo id="g6euu"><samp id="g6euu"></samp></bdo>
  • 首页 > 网?#31243;?#25928; > JS幻灯 > 轻量级JS焦点图/轮换图myFocus V2源码下载及安装教程

    轻量级JS焦点图/轮换图myFocus V2源码下载及安装教程

    时间:2013-07-15    来源:酷站代码

    myFocus是一个专注于焦点图/轮换图制作的JS库,它小巧而且是完全独立的JS库,用它可以轻松的制作出网上绝大部分常见的焦点图(甚至包括flash焦点图),而且制作出的焦点图体积也非常的小(1KB左右),功能也十分的完备,因为是轻量级,其运行效率也比常见的焦点图要高。

    最重要的一点是,用myFocus制作出的焦点图使用十分的简单方便,而且每个焦点图的接口/结构都是通用的,这样,只用1~2秒时间就给网站换不同风格的焦点图成为了可能。

    myFocus的设计理念就是简单易用,无论是多么复杂应用的焦点图。这就意味着,myFocus的所有焦点?#32423;?#21487;以轻松的切换风格、更改大小、添加任意多的图片等个性设置以快速的应用到你的网站上。

    注意是所有,包括带有?#36816;?#22270;风格的焦点图,这或许会带给你前所未有的体验。

    一、myFocus特性

    小巧却高效强大

    myFocus v2.0.min版只有9.89KB,却能使你的网页上可以运行超过30款风格各异的焦点图,在互联网独一无二哦~

    极其简单的使用

    无论有多少风格,还是这个风格有多么的牛逼闪闪,都只需加载一个js文件,然后用一句简单的js代码调用,然后……?收工喝茶去……

    灵活的设置

    你还想多点折腾?木有问题。myFocus提供了足够多的API让你进行更多个性化的设置,华丽丽的"?#24187;?#38047;变身"不在话下。

    独立、免?#36873;?#24320;源

    完全独立,不依赖任何JS库;完全免费,这意味着你可以在任何地方使用;也完全开源,这意味着你可以为myFocus贡献自己的风格代码,提供更多"华丽丽的变身"~

    二、安装教程

    简单3步,你即可以用上myFocus。

    Step 1. 在html的标签内引入相关文件

    <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文件-->

    提示:符合条件的情况下,引入风格文件(js/css)可省,引入myFocus库即可。那么风格文件是如何自动引入的?详情请看下面的myFocus的文件结构与自动引入风格文件机制。

    Step 2. 创建myFocus标准的html结构,并填充你的内容

    <div id="boxID"><!--焦点图盒子-->
        <div class="loading"><img src="img/loading.gif" alt="请稍候..." /></div><!--载入画面(可删除)-->
        <div class="pic"><!--内容列表(li数目可随意增减)-->
        	<ul>
              <li><a href="#"><img src="img/1.jpg" thumb="" alt="标题1" text="详细描述1" /></a></li>
              <li><a href="#"><img src="img/2.jpg" thumb="" alt="标题2" text="详细描述2" /></a></li>
              <li><a href="#"><img src="img/3.jpg" thumb="" alt="标题3" text="详细描述3" /></a></li>
              <li><a href="#"><img src="img/4.jpg" thumb="" alt="标题4" text="详细描述4" /></a></li>
              <li><a href="http://www.49836583.com/"><img src="img/5.jpg" thumb="" alt="标题5" text="详细描述5" /></a></li>
        	</ul>
        </div>
    </div>

    IMG标签的属性说明:

    • src : 图片地址;
    • thumb : 图片的?#36816;?#22270;地址(需要风格支持,可以省略,如果省略即把大图地址作为它的地址);
    • alt : 图片的描述文字;
    • text : 图片更详细的描述文字(需要风格支持,可以省略)

    Step 3. 在step1代码之后的任意一个位置调用(建议在head标签结束前调用)

    //你可以简单的调用---只设置它的盒子id,其它?#38382;?#20840;部默认设置:
    <script type="text/javascript">
    myFocus.set({id:'boxID'});
    </script>
    
    //或详细一点的?#38382;?#35843;用:
    <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>
    
    //更多?#38382;?#35774;置及jQuery方式调用请查看使用者API。

    进过这3步,你应该可以在浏览器欣赏到你的杰作了。enjoy it~

    三、myFocus的文件结构与自动引入风格文件机制

    ?#29575;?#19978;,风格文件是不需要在使用时手动引入,myFocus会根据你的pattern设置,寻找myFocus库文件目录下的mf-pattern目录,当找到相应的风格文件后,自动引入。

    这样,你只需要把你的风格文件放在myFocus库文件目录下的mf-pattern目录内,即可实现自动引入机制。

    例如,你的myFocus-2.0.0.min.js文件放在js目录,那么,只需在js目录内建立一个mf-pattern的子目录,这个子目录便是myFocus程序可以识别的存放风格文件的目录。

    在mf-pattern目录中,也存在一个img的子目录,它是存放某些风格的图片文件,虽然并不是每款风格都会有图片文件。

    建议把所有的风格文件都存放在这个mf-pattern目录,这样你就可以随意切换你的风格了,而且它是按需加载,并?#25442;?#24341;入其它多余的文件。myFocus的整个加载量(主库+风格)平均只有12KB左右。

    另外需要说明的是,这个自动引入机制已经做的足够智能,它并?#25442;?#37325;复引入风格文件,例如当你已经手动引入风格文件,?#21482;?#32773;干脆把某风格的js代码写在页面上,这时myFocus并?#25442;?#20877;次寻找引入风格文件,而是直接读取页面上的。

    特效推荐

    ?#35753;?#29305;效

    任选五走势图
  • <bdo id="g6euu"><blockquote id="g6euu"></blockquote></bdo>
    <bdo id="g6euu"><samp id="g6euu"></samp></bdo>
  • <bdo id="g6euu"><blockquote id="g6euu"></blockquote></bdo>
    <bdo id="g6euu"><samp id="g6euu"></samp></bdo>