动态请求数据并放入bootstrap轮播图

最新推荐文章于 2023-04-28 11:35:52 发布

weixin_33928137

最新推荐文章于 2023-04-28 11:35:52 发布

阅读量1k

点赞数

文章标签：数据库 javascript json ViewUI

原文链接：http://www.cnblogs.com/zishu/p/9063911.html

版权

下面是前端代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <!-- Bootstrap -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <body>
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
            <!-- Indicators -->
            <ol class="carousel-indicators" id="olnum">
                <!--填充到这里-->
            </ol>
            <!-- Wrapper for slides -->
            <div class="carousel-inner" role="listbox" id="lunbotu">
                <!--填充到这里-->
            </div>

            <!-- Controls -->
            <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>

        <script type="text/javascript">
            $(function() {
                var baseurl = 'http://127.0.0.1:8089/';
                var args = {
                    "time": new Date()
                };
                var id = 7;
                var url = baseurl + 'project/get/' + id;
                $.get(url, args, function(data) {
                    var extend = data.extend;
                    var project = extend.project;
                    var proimgsurl = extend.proimgsurl;
                    //首先清空已有数据
                    $("#lunbotu").empty();
                    $("#olnum").empty();
                    //填充轮播图数
                    for(var i=0;i<proimgsurl.length; i++){
                        if(i == 0){
                            $("#olnum").append("<li data-target='#carousel-example-generic' data-slide-to='0'  class='active'></li>")
                        }else{
                            $("#olnum").append("<li data-target='#carousel-example-generic' data-slide-to='"+i+"'></li>")
                        }
                    }
                    //填充每幅图像的具体信息
                    for(var i = 0; i < proimgsurl.length; i++) {
                        if(i == 0) {
                            $("#lunbotu").append("<div class='item active'>" +
                                    "<img src='" + proimgsurl[i] + "' alt=''>" +
                                    "<div class='carousel-caption'>" +
                                    "<p> " + "第" + i + "</p>" +
                                    "</div>" +
                                    "</div>");
                        } else {
                            $("#lunbotu").append("<div class='item'>" +
                                    "<img src='" + proimgsurl[i] + "' alt=''>" +
                                    "<div class='carousel-caption'>" +
                                    "<p> " + "第" + i + "</p>" +
                                    "</div>" +
                                    "</div>");
                        }
                    }
                })
            });
        </script>
    </body>
</html>

上面请求的接口返回的json数据大致如下：

{
    "code": 200,
    "msg": "处理成功",
    "extend": {
        "project": {
            "id": 1,
            "proTitle": "三林路老房翻新工程",
            "proAddress": "三林路",
            "proDate": 1517803509000,
            "proDistribute": "这是个老房翻新的工程，工程量不大，但也不好做，尽我所能让客户满意。",
            "category": "室内装潢",
            "firstimg": "C:/Users/hasee/AppData/Local/Temp/tomcat-docbase.7305268964789322776.8089/static/ProjectImgs/2018/5/19/2ea44b08dbcc462886af1c8e100bb429.png"
        },
        "proimgsurl": [
            "C:/Users/hasee/AppData/Local/Temp/tomcat-docbase.7305268964789322776.8089/static/ProjectImgs/2018/5/19/2ea44b08dbcc462886af1c8e100bb429.png",
            "C:/Users/hasee/AppData/Local/Temp/tomcat-docbase.2926016469805383954.8089/static/ProjectImgs/2018/5/20/6a3dfb5c83af4dc594f989e4a9baac9e.png",
            "C:/Users/hasee/AppData/Local/Temp/tomcat-docbase.7305268964789322776.8089/static/ProjectImgs/2018/5/19/2ea44b08dbcc462886af1c8e100bb429.png",
            "C:/Users/hasee/AppData/Local/Temp/tomcat-docbase.7305268964789322776.8089/static/ProjectImgs/2018/5/19/2ea44b08dbcc462886af1c8e100bb429.png"
        ]
    }
}

由于只是使用轮播图，故只是使用了图片数据

转载于:https://www.cnblogs.com/zishu/p/9063911.html

weixin_33928137

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
动态请求数据并放入bootstrap轮播图

下面是前端代码：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <!-- jQuery (Bootstrap 的所有 JavaS...
复制链接

扫一扫