[置顶] FengFocus 焦点图插件（昨天写了博客，今天封装了）
FengFocus 使用说明
FengFocus Demo
查看 FengFocus Demo
为什么要写 FengFocus ？
自从开始学习 jQuery 我就深深的被它给吸引了。虽然年岁有点大了。但是止不住想要学习的冲动。
根据我个人的学习经验，我认为实战是唯一提升自己的途径。所以我自己写了一些 jQuery 插件。
去年自己写的第一个焦点图插件，命名为 FengFocus 1.0 版本。在我所做的几个项目中也都运用了。但是我自己却很不满意。
为什么呢？原因有如下几点
- 逻辑混乱，过于复杂
- 代码冗长，自己都看不懂
- 在一个页面多出使用时会出错，虽然经过我仔细检查，并未发现问题出现在哪里。
所以我一直想要重写这个焦点图插件。但是一来是懒，二来还是懒。一直没去写。
昨天反法西斯70周年阅兵，我顿时觉得应该为祖国做点贡献，因此决定重写。（这牛逼吹的，不就是放假无聊写点代码玩儿么~）
FengFocus 的特点
- html 结构异常简单，除了少数优秀的焦点图插件，大多数都是HTML异常复杂而功能单一的。
- 表现形式完全css化，有很多焦点图插件将表现形式写在了js中，优点是只要一个文件，而不用管css。缺点就是，修改样式异常困难，为我不喜。
- 切换效果简单，只采用了 jQuery 自带的 slideDown 和 fadeIn 这两个效果。当然，一般情况下 fadeIn 其实就够用了。如果需要更加复杂的切换效果，可以使用
jQuery Easing
插件来简单拓展 - 单一页面重复使用，严格的将所有动作控制在目标元素之内，不会与其他代码产生冲突。单一页面可以多次使用。
FengFocus 能用来做什么？
- 适用于新手学习 jQuery
- 适用于大多数场景下的焦点图
使用 FengFocus 需要具备什么知识？
- 如果是简单使用，只要具备 html+css 的基本知识即可。
- 如果要修改得非常漂亮，最好具备优秀的 css3 知识。我提供了 scss 版本的 css 预编译文件，便于修改。
- 如果要使用特殊效果，就的具备 jQuery 的基本知识了。
FengFocus 版权声明
FengFocus 为自由软件，你可以自由使用，不受任何限制。但严禁插入恶意代码。另，各大下载网站转载本插件，请务必保留我的详细说明，和网站链接！谢谢！
如何获取 FengFocus
- 百度云盘下载：http://pan.baidu.com/s/1c04SXeo
- FengCms 官方下载：http://www.fengcms.com/code/FengFocus/ 查看说明后， 点此下载
- Admin5下载频道，搜索 FengFocus 即可找到下载。http://down.admin5.com/
- 百度搜索 FengFocus 看能不能找到喽~
FengFocus 开始使用的准备
需要在 html 的 head 中引入 jQuery，和 FengFocus 插件
<script src="js/jquery/jquery.js"></script> <script src="js/FengFocus.js"></script>
就是这样啦！当然，路径还是要修改为你自己的路径的。
FengFocus 的 html 结构
<div id="FengFocus">
<ul>
<li><a href="#"><img src="image/1.jpg" alt="this is the Focus title 1" data-info="this is the Focus info for 1"></a></li>
<li><a href="#"><img src="image/2.jpg" alt="this is the Focus title 2" data-info="this is the Focus info for 2"></a></li>
<li><a href="#"><img src="image/3.jpg" alt="this is the Focus title 3" data-info="this is the Focus info for 3"></a></li>
<li><a href="#"><img src="image/4.jpg" alt="this is the Focus title 4" data-info="this is the Focus info for 4"></a></li>
<li><a href="#"><img src="image/5.jpg" alt="this is the Focus title 5" data-info="this is the Focus info for 5"></a></li>
</ul>
</div>
如上，html结构是异常简单的。
ID 必须保证是唯一的。当然，也是可以修改得，只要对应的CSS进行修改即可。
其中，图片 alt 值是用于 焦点图 的标题。 data-info值是用于焦点图简介。
如果你在项目中是不需要使用 标题 和 简介 两个参数，建议 alt 值还是要写的，data-info 值留空即可。并在 css 中做隐藏处理即可。
FengFocus 的 css 代码
我的css只能作为演示，你在实际项目中，是一定要美化它的。
scss 预编译版本
#FengFocus {
// 设定变量 焦点图的宽高大小
$width:500px;
$height:400px;
// 焦点图外框的CSS
width: $width;height: $height;overflow: hidden;position: relative;
// 这里是对 焦点图 标题 和 简介的样式，如果不需要，直接隐藏掉即可。
.FocusPic {
p,strong {position: absolute;display: block;background:rgba(#000, 0.5);color: #fff;}
p {border-radius: 5px;top: 30px;left: 30px;padding: 5px 10px;}
strong {bottom: 0;left: 0;font-size: 14px;width: $width;text-indent: 10px;height: 36px;line-height: 36px;}
}
// 这里是对 焦点图 小数字 的 样式，可根据自己的需要进行修改。
.FocusNum {
position: absolute;right: 0;bottom: 0;height: 31px;
li {
float: left;height: 26px;line-height: 26px;background:rgba(#fff,0.5);width: 26px;
color: #fff;margin-right: 5px;text-align: center;border-radius: 3px;cursor: pointer;
&.on {background: #fff;color: #555;}
}
}
// 向左向右按钮的样式 如不需要，隐藏掉即可。
.FocusLeft,.FocusRight {
position: absolute;width: 30px;height: 80px;top: 160px;background:rgba(#000,0.5);left: 10px;cursor: pointer;
}
.FocusRight {right: 10px;left: auto;}
}
css 版本（横列）
#FengFocus { width: 500px; height: 400px; overflow: hidden; position: relative; }
#FengFocus .FocusPic p, #FengFocus .FocusPic strong { position: absolute; display: block; background: rgba(0, 0, 0, 0.5); color: #fff; }
#FengFocus .FocusPic p { border-radius: 5px; top: 30px; left: 30px; padding: 5px 10px; }
#FengFocus .FocusPic strong { bottom: 0; left: 0; font-size: 14px; width: 500px; text-indent: 10px; height: 36px; line-height: 36px; }
#FengFocus .FocusNum { position: absolute; right: 0; bottom: 0; height: 31px; }
#FengFocus .FocusNum li { float: left; height: 26px; line-height: 26px; background: rgba(255, 255, 255, 0.5); width: 26px; color: #fff; margin-right: 5px; text-align: center; border-radius: 3px; cursor: pointer; }
#FengFocus .FocusNum li.on { background: #fff; color: #555; }
#FengFocus .FocusLeft, #FengFocus .FocusRight { position: absolute; width: 30px; height: 80px; top: 160px; background: rgba(0, 0, 0, 0.5); left: 10px; cursor: pointer; }
#FengFocus .FocusRight { right: 10px; left: auto; }
如果你不会使用 scss 可以对上面的 css 进行修改后直接使用。当然，看上去是要比 scss 要乱一点点的。
css 版本（纵列）
#FengFocus {
width: 500px;
height: 400px;
overflow: hidden;
position: relative;
}
#FengFocus .FocusPic p, #FengFocus .FocusPic strong {
position: absolute;
display: block;
background: rgba(0, 0, 0, 0.5);
color: #fff;
}
#FengFocus .FocusPic p {
border-radius: 5px;
top: 30px;
left: 30px;
padding: 5px 10px;
}
#FengFocus .FocusPic strong {
bottom: 0;
left: 0;
font-size: 14px;
width: 500px;
text-indent: 10px;
height: 36px;
line-height: 36px;
}
#FengFocus .FocusNum {
position: absolute;
right: 0;
bottom: 0;
height: 31px;
}
#FengFocus .FocusNum li {
float: left;
height: 26px;
line-height: 26px;
background: rgba(255, 255, 255, 0.5);
width: 26px;
color: #fff;
margin-right: 5px;
text-align: center;
border-radius: 3px;
cursor: pointer;
}
#FengFocus .FocusNum li.on {
background: #fff;
color: #555;
}
#FengFocus .FocusLeft, #FengFocus .FocusRight {
position: absolute;
width: 30px;
height: 80px;
top: 160px;
background: rgba(0, 0, 0, 0.5);
left: 10px;
cursor: pointer;
}
#FengFocus .FocusRight {
right: 10px;
left: auto;
}
当然，我这么贴心的人，当然会给出纵列的 css 啦，虽然我认为这样写css很不利于查看 -_-|||
FengFocus 使用的最后一步
在 HTML 中 设置 焦点图 参数
<script>
$("#FengFocus").FengFocus({
defaultIndex : 0, // 默认显示第几个，第一个为 0
trigger : "click", // 数字交互方式，click 为 点击切换，mouseover 为鼠标碰到就切换
showtime : 3000, // 默认自动切换时间，单位为毫秒
showWay : "slow", // 焦点图切换方式，slow 为渐隐渐现 down 为上下切换
});
</script>
当然，你也可以把设置参数放到独立的js文件之中，然后引入进来。但是，请确保你是写在类似下面的代码之中的。
$(function(){
$("#FengFocus").FengFocus({
defaultIndex : 0, // 默认显示第几个，第一个为 0
trigger : "click", // 数字交互方式，click 为 点击切换，mouseover 为鼠标碰到就切换
showtime : 3000, // 默认自动切换时间，单位为毫秒
showWay : "slow", // 焦点图切换方式，slow 为渐隐渐现 down 为上下切换
});
});
好啦，到这里就完全结束了。如果想对js源码进行查看，请自行查看文件吧。我里面有比较详细的注释的。
最后，祝大家开心！
版权所有 © FengCmsFung Leo未经许可，严禁复制或建立镜像