焦点图分有：flash焦点图  js焦点图  css焦点图  jQ焦点图（其中jQ焦点图以代码量少，实现功能成为首选）；

myFocus是一款专注于焦点图制作的js插件；

使用步骤：点击下载——Demo显示打包下载——点击 下载的链接——下载

注：在引用myFocus插件时只需要把下载后myFocus的整个js文件复制到自己的站点的js里即可；

js部分：

<script type="js/myfocus-2.0.1.min.js" type="text/javascript"></script>    //引用myfocus插件库

<script type="js/mf-pattern/mF-YSlider.js" type="text/javascript"></script>    //引入myfocus插件中所需的js效果

<link href="http://www.mamicode.com/js/mf-pattern/mF-YSlider.css" type="text/css" rel="stylesheet"/>    //引入myfocus插件中所需的css样式

<script type="text/javascript">

　　myFocus.set({

　　　　id:‘picBox‘         //焦点图初始化，其Id名要与图片列表最外层的Id一致

　　});

</script>

CSS部分:暂时不写

html部分：

<div class="ad" id="picBox">

　　<div class="loading"><img src="http://www.mamicode.com/images/loading.gif" alt="图片加载中"/></div>    //显示加载过程

　　<div class="pic">     //为实现焦点图的切换效果，图片列表外面必须要包裹一个class为pic的div

　　　　<ul>

　　　　　　<li><img src="http://www.mamicode.com/images/ad1.jpg"/></li>

　　　　　　<li><img src="http://www.mamicode.com/images/ad2.jpg"/></li>

　　　　　　<li><img src="http://www.mamicode.com/images/ad3.jpg"/></li>

　　　　</ul>

　　</div>

</div>

更多关于myFocus插件的使用到：http://demo.jb51.net/myfocus/tutorials.html