使用myfocus制作焦点图

第一步：引入myfocus基本库和所要使用样式的js和css文件

<script src="js/myfocus-2.0.1.min.js"></script><br>
<script src="js/mf-pattern/mF_fancy.js"></script>
<link rel="stylesheet" type="text/css" href="js/mf-pattern/mF_fancy.css">

第二步：用myFocus.set({id:"testId"})可以进行基本调用

<script>
    myFocus.set({
    id:"picBox"
    });
</script>

注意：使用焦点图效果的图片需要放在类名为"pic"的div下

例子：

<div class="ad" id="picBox">
    <div class="loading"><img src="data:images/loading.gif" alt="请稍后..."></div><!--载入画面(可删除)-->
      <div class="pic">
        <ul>
        <li><img src="data:images/ad2.jpg"></li>
        <li><img src="data:images/ad3.jpg"></li>
        <li><img src="data:images/ad4.jpg"></li>
    </ul>
    </div>
  </div>

更多内容参考 http://demo.jb51.net/js/myfocus/tutorials.html