1、在head中引入myFocus库
<script src="js/myfocus-2.0.1.min.js" type="text/javascript"></script>
<script src="js/mf-pattern/mF_YSlider.js" type="text/javascript"></script>
<link href="js/mf-pattern/mF_YSlider.css" rel="stylesheet" type="text/css" />
2、创建myFocus结构
<div class="ad" id="picBox">
<div class="loading"><img src="img/loading.gif" alt="正在加载中...."/></div>
<div class="pic">
<ul>
<li><img src="img/ad4.jpg"/></li>
<li><img src="img/ad2.jpg"/></li>
<li><img src="img/ad3.jpg"/></li>
</ul>
</div>
</div>
3、在head结束前调用（两种方法）
1）<script type="text/javascript">
myFocus.set({id:“picBox”});
</script>
2）<script type="text/javascript">
myFocus.set({
id:'picBox',//焦点图盒子ID
pattern:'mF_name',//风格应用的名称
time:3,//切换时间间隔(秒)
trigger:'click',//触发切换模式:'click'(点击)/'mouseover'(悬停)
width:450,//设置图片区域宽度(像素)
height:296,//设置图片区域高度(像素)
txtHeight:'default'//文字层高度设置(像素),'default'为默认高度，0为隐藏
});
</script>
注意：
1、焦点图初始化ID要和图片列表最外面的ID保持一致
2、<ul>标签外必须包裹一个div且class必须为pic