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

发布时间：2020-12-17 20:53:10 所属栏目：安全来源：网络整理

导读：下面是前端代码： ! 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

下面是前端代码：

<!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"
        ]
    }
}

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!