图片幻灯片组件myFocus的应用

    在网站项目中需要有图片幻灯片的效果，在网上找了一些资料，最终选了myFocus这个js组件，感觉还是挺不错的。下面是一些它的使用方法，以及需要注意的地方。

 

    到目前为止，最新的myFocus版本是myfocus-1.2.4，可以在http://code.google.com/p/myfocus-js/downloads/detail?name=myFocus%20Demo%20v1.2.4.rar&can=2&q=label%3Amyfocus下载它的demo，稍后我也会在附件中上传一份，不过最好去它的官网下载http://code.google.com/p/myfocus-js/，它的版本会不定期的更新。

 

应用步骤如下：（以我的实际应用为例）

 

1.下载myfocus-1.2.4

 

2.在需要加载图片幻灯片的页面引用它的js库：

<script type="text/javascript" src="${path}/resources/b2c/scripts/myfocus/js/myfocus-1.2.4.full.js"></script>

  myfocus-1.2.4.full.js中包含了myFocus默认的设置值，主要的调用函数也基本都在里面。

默认值如下：

 

var mF={ defConfig:{//全局默认设置 pattern:'mF_fscreen_tb',//风格样式 trigger:'click',//触发切换模式['click'(鼠标点击)|'mouseover'(鼠标悬停)] txtHeight:'default',//文字层高度设置['default'(默认高度)|0(隐藏)|num(数字,单位像素)] wrap:true,//是否保留边框(有的话)[true|false] auto:true,//是否自动播放[true|false] time:4,//每次停留时间[num(数字,单位秒)] index:0,//开始显示的图片序号(从0算起)[num(数字)] waiting:20,//Loading画面的最长等待时间[true(一直等待)|false(不等待)|num(数字,单位秒)] delay:100,//触发切换模式中'mouseover'模式下的切换延迟[num(数字,单位毫秒)] css:true,//是否需要程序定义CSS[true|false] path:base.root+'/resources/b2c/scripts/myfocus/js/pattern/',//pattern文件的路径,相对html文件的路径,设置为false或0即取消程序引入 autoZoom:true//是否允许图片自动缩放居中[true|false] },

注意：path是必须要改动的，否则会加载失败，其他的差数可以自定义。

 

3.页面上自定义myFocus的属性

 

<div id="myFocus-wrap">

    <div id="myFocus" style="visibility:hidden"><!--焦点图盒子-->

      <div class="loading"><span>请稍候...</span></div><!--载入画面-->

      <ul class="pic"><!--内容列表-->

        <li><a href="#"><img src="${path}/resources/b2c/template/images/index/latestImage/1.jpg" thumb="" alt="图片1来源于网络，版权属于作者" text="图片1更详细的描述文字" /></a></li>

        <li><a href="#"><img src="${path}/resources/b2c/template/images/index/latestImage/2.jpg" thumb="" alt="版权属于作者，图片2来源于网络" text="图片2更详细的描述文字" /></a></li>

        <li><a href="#"><img src="${path}/resources/b2c/template/images/index/latestImage/3.jpg" thumb="" alt="图片3来源于网络，版权属于作者" text="图片3更详细的描述文字" /></a></li>

        <li><a href="#"><img src="${path}/resources/b2c/template/images/index/latestImage/4.jpg" thumb="" alt="版权属于作者，图片4来源于网络" text="图片4更详细的描述文字" /></a></li>

        <li><a href="#"><img src="${path}/resources/b2c/template/images/index/latestImage/5.jpg" thumb="" alt="图片5来源于网络，版权属于作者" text="图片5更详细的描述文字" /></a></li>

      </ul>

    </div>

    </div>

 

<script type="text/javascript">

function getParam(){//获取全部参数

return {

   id:'myFocus',//焦点图盒子ID

   pattern:'mF_fscreen_tb',//风格应用的名称

   time:3,//切换时间间隔(秒)

   trigger:'mouseover',//触发切换模式:'click'(点击)/'mouseover'(悬停)

   width:650,//设置宽度(主图区)

   height:400,//设置高度(主图区)

   txtHeight:'default'//文字层高度设置,'default'为默认高度，0为隐藏

};

}

 

//开始设置

myFocus.set(getParam(),true,function(){

});

//屏蔽IE执行误差

window.οnerrοr=function(){return true};

</script>

 

 

注意：黄色字体部分你可以自定义它的属性。

 

具体使用方法可以参照它的最新demo，里面有不同的风格可供使用，使用手册可参照http://bbs.blueidea.com/thread-3006673-1-1.html