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

下面是前端代码：

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

        ]

    }

}

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

动态请求数据并放入bootstrap轮播图的更多相关文章

bootstrap轮播图两侧半透明阴影
用bootstrap轮播图:Carousel插件,图片两侧影音实在碍眼,想去掉,首先发现有css里由opacity: 0.5这个东西来控制,全部改成opacity: 0.0,发现指示箭头也看不见了. ...
Bootstrap 轮播图的使用和理解
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...
解决ajax异步请求数据后swiper不能循环轮播(loop失效)问题、滑动后不能轮播的问题。
问题描述: 1.我使用axios异步请求后台的图片进行渲染后不能实现循环轮播,也就是loop失效,但是静态写死的情况下不会出现这种问题. 2. 分析: swiper的机制是:初始化的时候将swiper ...
第124天：移动web端-Bootstrap轮播图插件使用
Bootstrap JS插件使用 > 对于Bootstrap的JS插件,我们只需要将文档实例中的代码粘到我们自己的代码中> 然后作出相应的样式调整 Bootstrap中轮播图插件叫作Car ...
bootstrap轮播图--兼容IE7
<!DOCTYPE html> <html> <head> <title>Bootstrap轮播</title> <meta char ...
bootstrap轮播图组件
一.轮播图组件模板(官方文档) <div id="carousel-example-generic" class="carousel slide" dat ...
bootstrap轮播图
<!doctype html><html><head> <meta charset="utf-8"> <title>使用 ...
Bootstrap 轮播图（Carousel）插件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
bootstrap轮播图不能显示左右箭头
引入font文件夹即可原文 :http://www.imooc.com/qadetail/64277

随机推荐

React（17）异步组件
26.异步组件当在React里使用异步组件时,核心知识是两个: webpack 如何异步加载其他模块:通过 require(['xxx'], function(module){})来实现:React ...
AI应用开发实战（转）
AI应用开发实战 - 从零开始配置环境与本篇配套的视频教程请访问:https://www.bilibili.com/video/av24421492/ 建议和反馈,请发送到https://git ...
.net core WebAPI 初探及连接MySQL
1. 前言笔者最近跟着微软官方文档学习.net core WebAPI,但发现其对 WebAPI 连接数据库.读取数据库方面讲得不够细致明了.写此文的目的,即实现 .net core WebAPI ...
如何在html显示当前时间
下边那个是一直快速跳转的 <!doctype html> <html> <head> <meta charset="utf-8"&g ...
python 对Excel表格的写入
python对Excel表格写入需要导入xlrd ,和xlutils两个库 from xlrd import open_workbook from xlutils.copy import copy o ...
分割字符串和截取字符串：split 和substring
//按“,”截取字符串 String id="123123,234534,453456"; String[] idArry = id.trim().split(",&qu ...
java ReentrantLock结合条件队列实现生产者-消费者模式以及ReentratLock和Synchronized对比
package reentrantlock; import java.util.ArrayList; public class ProviderAndConsumerTest { static Pro ...
从Uber微服务看最佳实践如何炼成？
导读:Uber成长非常迅速,工程师团队快速扩充,据说Uber有2000名工程师,8000个代码仓库,部署了1000多个微服务.微服务架构是Uber应对技术团队快速增长,功能快速上线很出色的解决方案.本 ...
DDD - 概述 - 模块 (二)
首先,你必须知道以下DDD构建块: Entities - 实体 Value objects - 值对象 Aggregate roots - 聚合跟 Repositories - 仓储对象 Factor ...
hashMap源码学习记录
hashMap作为java开发面试最常考的一个题目之一,有必要花时间去阅读源码,了解底层实现原理. 首先,让我们看看hashMap这个类有哪些属性 // hashMap初始数组容量 static fi ...

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

动态请求数据并放入bootstrap轮播图的更多相关文章

随机推荐

热门专题