前言：

就网站输出而言，焦点图和滑动门切换是最常用的两个特效。但系统默认的焦点图样色固定，不能满足客户需求或者实现设计图上炫丽的效果，有js功底的同事可以自己根据需要制作焦点图特效，但对于没js基础的同事来说，这是一个很痛苦的事，那么我们可不可以制作一个简单易用的“万能焦点图”来实现我们的需求呢。仔细思考，其实焦点图本身就是一个滑动门切换的效果，而滑动门切换是我们最常用的特效，是每位设计部同事必须掌握的技能。

所以，本文就是结合动易系统和我们最常用的滑动门切换特效“jQuery：switchTab”来制作万能焦点图。

 

一、现状分析

系统默认焦点图缺点：

1、  样色不能根据需求自定义设置

2、  不能满足客户要求

3、  不能实现效果图上的效果

点击查看 默认焦点图效果

解决方法：

自己做一个焦点图特效，能自定义样色，解决绝大部分需要。

二、滑动门切换特效

这部分我们主要谈一下焦点图制作思路和解决默认switchTab缺点，实现我们所需效果的过程。

其实，仔细观察，焦点图本身就是一个滑动门切换的特效。

我们先看一下jQuery：switchTab这个特效的使用方式是怎样的，最大的好处就是自由度很高，能先把html效果输出来，再通过参数来控制怎样切换。

源文件：http://dtop.powereasy.net/Skin/DTOP/switchTab.js

参数：

* JQuery滑动切换插件 ver 1.2.0

*

* defaultIndex         - 默认选中的标签索引，从0开始

* titOnClassName   - 标签选中时的样式

* titCell                       - 自定义标题标签，支持选择符//切换索引

* mainCell                  - 自定义标题标签，支持选择符//切换内容

* delayTime                        - 延迟触发时间. 当这个时间小于切换动画效果时间时, 动画将被禁用

* interTime                - 自动切换时间. 当这个时间大于0时, 标签将定时自动切换

* trigger                     - 滑动触发方式. 默认为click, 可选择mouseover

* effect                       - 切换动画. 默认不使用动画. 目前仅提供fade(淡出), slide(向下展开)两种

* omitLinks                - 是否忽略带链接标签，默认为否

* debug                      - 调试模式. 默认关闭

理解switchTab后，我们就可以使用switchTab制作的焦点图（效果）。

缺点：鼠标悬停在数字上面或者大图上面的时候，自动切换继续，这是不好的用户体验，于是我们修改一下switchTab代码。

结果：

修改后的switchTab制作的焦点图效果

修改后的源代码：http://dtop.powereasy.net/Skin/DTOP/switchTab_zx.js

主要解决了“鼠标悬停在数字上面或者大图上面的时候，自动切换继续”的错误。

实现我们最终需要的效果。

三、万能焦点图使用说明

        【实现效果】【文件下载】

1、  复制“内容带图片的信息列表_焦点图带内容.config”标签到标签库里；

2、  复制“switchTab_zx.js”到样色文件夹下（或者替换你原来使用的switchTab代码，绝对不影响原本已经输出好的页面）；

3、  复制“css代码”到自己的样色文件下（ 这里预设了4种样色 ）

4、  在具体地方调用，调用方式：

{PE.Label id="内容带图片的信息列表" bindStyle="焦点图带内容" titleLength="40" contentLength="140" outputQty="4" nodes="1" listOrderByNodeSet="true" displayTips="true"/}

（ 1、如果你是覆盖原来使用的switchTab代码，那么就不用在调用“switchTab_zx.js”了。

   2、“内容带图片的信息列表_焦点图带内容.config”其实就是“内容带图片的信息列表”的样色标签，支持该标签所有参数）

5、  如有需要，自己修改css代码来实现所需效果。如果“内容带图片的信息列表_焦点图带内容.config”的html结构不能满足需求，那么请自行修改标签，实现所需效果。

四、扩展

只要理解了switchTab后，我们甚至可以脱离“内容带图片的信息列表_焦点图带内容.config”这个标签，按照实际情况来实现各种效果。

例如【实现效果】最后一个就是用两个“内容带图片的信息列表_普通式”实现的效果

  

 

五、总结

现在的“万能焦点图”还是有一个缺点，就是切换效果只支持淡入淡出和直接的显示隐藏，日后可能会追加一些滚动效果等。

希望这篇文章能帮到大家，谢谢。