焦点图总结

1.分类：

js焦点图，使用原生态的js代码实现的焦点图。样式相对单一，如借助css可实现多样的风格。

flash焦点图，看名字就可以理解，使用flash设计或用flash as编程设计的焦点图。该焦点图优点是字体展现效果佳，比纯网页形式更具有美感。不利于SEO与引擎的抓取。

css焦点图，不难理解网页设计现在流程html+css设计，css焦点图就是这样而来的，很多情况下需要结合js代码实现。

jquery焦点图，现在很流行的实现方式，逐步取代js原生态的焦点图，因为jquery焦点图的代码书写简单，借助jquery的类库很容易实现常见的js焦点图效果。而且代码少。不过需要有一定的网页设计基础。

2.素材：

myfocus

17素材网

懒人之家

懒人图库

站长之家

3.使用：

1）下载源文件

2）引用所需样式的js&css文件

3）写标签{div+ul+li+img}

4） 写样式{调大小，设置overflow属性值为hidden}

5）写js，调用该库的方法

注意：焦点图的加载可能会比较慢，为了使页面更加友好，需要加入一个加载图

4.myfocus例子演示

1)引入myfocus.js

2)引入所需要的样式js及其对应的css

5）把图片放在一个无序列表里，设置外面div的高度为图片高度，overflow为hidden

4）两个div：外面的div要有class和id ，id对应要用的js函数，里面的div要有class

5）改写函数设置参数：

myFocus.set({
  id:'picBox'
})

注意点：1）为了使界面更友好防止被用户看到我们界面卡顿要在列表前面加入一张loading图片

2）img文件夹不能缺

5.比较优劣

myfocus

原生JS编写，独立无依赖
性能卓越，同样效果比jQuery更流畅
简单易用，傻瓜式API和标准HTML结构
效果华丽，媲美Flash焦点图
功能强大，30多种风格切换，支持N种常用设置
体积小巧，仅5.93KB(minified & gzipped)
支持 IE6+ / Chrome / Firefox 等现代浏览器

支持自定义开发扩展

未完待续。。。。