开源软件名称：

mybigimgbox

开源软件地址：

https://gitee.com/yesmyself/mybigimgbox

开源软件介绍：

mybigimgbox

介绍

在WEB页面中展示图片，可用于页面首屏大图（多图切换），焦点图或二次开发后用于相册图片展示！自适应PC大屏、手机、平板等设备的屏幕！注释信息完善，无高难度繁复的代码，支持一般新手根据自己的需要修改代码！

所需插件

Jquery 1+

截图

目录说明

./example 此目录中为示例代码（简单展示用法）

查看案例代码

<!DOCTYPE html><html lang="zh-CN"><head>    <meta charset="utf-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">    <title>mybigimgbox 焦点图功能 自适应PC 手机 平板等设备</title>    <style>html,body {padding: 0px;margin: 0px;}</style>    <link href="./css/mybigimgbox.css" rel="stylesheet">    <script src="./js/jquery.min.js"></script></head><body>    <div class="mybigimgbox" style="display: none;">        <div style="display: none;">            <a href="./" target="_self"><img src="./img/bigimg01.jpg" alt="测试一"></a>            <a href="./" target="_self"><img src="./img/bigimg02.jpg" alt="测试二"></a>            <a href="./" target="_self"><img src="./img/bigimg03.jpg" alt="测试三"></a>            <a href="./" target="_self"><img src="./img/bigimg04.jpg" alt="测试四"></a>            <a href="./" target="_self"><img src="./img/bigimg05.jpg" alt="测试五"></a>        </div>    </div>    <script src="./js/mybigimgbox.js"></script></body></html>

建议下载本项目到本地后，在浏览器中打开 example/index.html

使用方法

第一步：在页面`<head>`区中添加如下内容：

<link href="./css/mybigimgbox.css" rel="stylesheet"><script src="./js/jquery.min.js"></script>

第二步：在页面`<body>`区域添加内容

方法一：直接在页面`<body>`区域添加如下内容：

<div class="mybigimgbox" style="display: none;">    <div style="display: none;">        <a href="./" target="_self"><img src="./img/bigimg01.jpg" alt="测试一"></a>        <a href="./" target="_self"><img src="./img/bigimg02.jpg" alt="测试二"></a>        <a href="./" target="_self"><img src="./img/bigimg03.jpg" alt="测试三"></a>        <a href="./" target="_self"><img src="./img/bigimg04.jpg" alt="测试四"></a>        <a href="./" target="_self"><img src="./img/bigimg05.jpg" alt="测试五"></a>    </div></div><script src="./js/mybigimgbox.js"></script>

方法二：将代码添加到其他已有的元素标签中

例如：将代码块添加到 class="box" 的DIV中

<div class="box">    <div class="mybigimgbox" style="display: none;">        <div style="display: none;">            <a href="./" target="_self"><img src="./img/bigimg01.jpg" alt="测试一"></a>            <a href="./" target="_self"><img src="./img/bigimg02.jpg" alt="测试二"></a>            <a href="./" target="_self"><img src="./img/bigimg03.jpg" alt="测试三"></a>            <a href="./" target="_self"><img src="./img/bigimg04.jpg" alt="测试四"></a>            <a href="./" target="_self"><img src="./img/bigimg05.jpg" alt="测试五"></a>        </div>    </div></div><script src="./js/mybigimgbox.js"></script>

注意：css文件和js文件的引用地址需要根据实际目录结构修改，一个页面中只能引用一次

第三步：根据需要修改参数配置

打开文件./mybigimgbox.js，修改参数！

第四步：修改代码块中的内容

<a href="./" target="_self"><img src="./img/bigimg01.jpg" alt="测试一"></a><a href="./" target="_self"><img src="./img/bigimg02.jpg" alt="测试二"></a><a href="./" target="_self"><img src="./img/bigimg03.jpg" alt="测试三"></a><a href="./" target="_self"><img src="./img/bigimg04.jpg" alt="测试四"></a><a href="./" target="_self"><img src="./img/bigimg05.jpg" alt="测试五"></a>

注意：以上代码块中的 A标签和 Img标签内容可修改，但不要修改代码的结构