首页 > 网页特效 > JS幻灯 > 轻量级JS焦点图/轮换图myFocus V2源码下载及安装教程

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

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

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

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

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

注意是所有,包括带有略缩图风格的焦点图,这或许会带给你前所未有的体验。

一、myFocus特性

小巧却高效强大

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

极其简单的使用

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

灵活的设置

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

独立、免费、开源

完全独立,不依赖任何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.5icool.org/"><img src="img/5.jpg" thumb="" alt="标题5" text="详细描述5" /></a></li>
    	</ul>
    </div>
</div>

IMG标签的属性说明:

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

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

//你可以简单的调用---只设置它的盒子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>

//更多参数设置及jQuery方式调用请查看使用者API。

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

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

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

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

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

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

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

另外需要说明的是,这个自动引入机制已经做的足够智能,它并不会重复引入风格文件,例如当你已经手动引入风格文件,又或者干脆把某风格的js代码写在页面上,这时myFocus并不会再次寻找引入风格文件,而是直接读取页面上的。

特效推荐

热门特效