FengFocus 焦点图插件（昨天写了博客，今天封装了）

FungLeo

发布于 2022-11-28 08:50:49

5220

发布于 2022-11-28 08:50:49

文章被收录于专栏：地方网络工作室的专栏地方网络工作室的专栏

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源码进行查看，请自行查看文件吧。我里面有比较详细的注释的。

最后，祝大家开心！

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2015-09-04，如有侵权请联系 cloudcommunity@tencent.com 删除

jquery