Layer front-end component picture display function

This time I bring to you, what are the precautions, the following is a practical case, let's take a look.

Implement picture display function: layer

1. Here we introduce a layer front-end component

Layer is a web elastic layer component with excellent reputation. It has a comprehensive solution and is committed to serving developers of all levels. Your page will easily have a rich and friendly operating experience.

this site to download.

<script type="text/javascript" src=".../.../layer/layer/layer.js"></script>
<script type="text/javascript" src=".../...//layer/layer/extend/layer.ext.js"></script>

Note: The layer.js file should be introduced after jquery, because layer.js is based on jquery.js!

2.json

Json is also required to implement the image display function:

{ //您服务端接口需严格按照下述格式返回
    "status": 1,  //请求的状态，1表示成功，其它表示失败
    "msg": "", //状态提示语
    "title": "",  //相册标题
    "id": number型,  //相册id
    "start": 0, //初始显示的图片序号，默认0
    "data": [  //相册包含的图片，数组格式
      {
        "name": "", //图片名
        "pid": number型, //图片id
        "src": "", //原图地址
        "thumb": "", //缩略图地址
        "area": [638, 851] //原图宽高
      }
    ]
}

StringBuilder str = new StringBuilder();

return str.toString();

http://layer.layui.com/

Use JS timer to implement the progress bar

Detailed explanation of the use of vue-router

The above is the detailed content of Layer front-end component picture display function. For more information, please follow other related articles on the PHP Chinese website!