一、前台界面

 <%@ page language="java" contentType="text/html; charset=UTF-8"

     pageEncoding="UTF-8"%>

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

 <title>Insert title here</title>

     <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">

     <script src="bootstrap-3.3.7-dist/js/jquery.js"></script>

     <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

 </head>

 <body>

 <div class="container">

 <div id="myCarousel" class="carousel slide" >

     <!-- 轮播（Carousel）指标 -->

     <ol class="carousel-indicators" id="caro">

     </ol>

     <!-- 轮播（Carousel）项目 -->

     <div class="carousel-inner" id="car">

     </div>

     <!-- 轮播（Carousel）导航 -->

     <a class="carousel-control left" href="#myCarousel"

        data-slide="prev">&lsaquo;</a>

     <a class="carousel-control right" href="#myCarousel"

        data-slide="next">&rsaquo;</a>

 </div>

 </div>

 </body>

 <script type="text/javascript">

 $(function () {

     $('#myCarousel').carousel({

         interval: 2000

     });

     $.ajax({

         url:"selectUserimage.do",

         type:"post",

         async:false,

         dataType:"json",

         success:function(data){

             var obj = $("#car");

             var obj1 = $("#caro");

             var op1 = "<li data-target='#myCarousel' data-slide-to='"+0+"'></li>";

             var op = "<div class='item active'><img src='"+data[0].userimage+"' alt='Second slide'></div>";

             obj.append(op);

             obj1.append(op1);

             for(var i=0;i<data.length;i++){

                 alert(data[i].userimage!="");

                 if(data[i].userimage!=""){

                      var op1 = "<li data-target='#myCarousel' data-slide-to='"+i+"'></li>";

                         var op = "<div class='item'><img src='"+data[i].userimage+"' alt='Second slide'></div>";

                         obj1.append(op1);

                         obj.append(op);

                 }

             }

         }

     })

 });

 </script>

 </html>

二、后台只需要返回一个json格式的就可以了

 @RequestMapping(value="selectUserimage",produces="text/html;charset=utf-8")

     public @ResponseBody String selectAllUserimage(){

         List<Student> slist = studentService.selectAll();

         JSONArray json = JSONArray.fromObject(slist);

         String jso = json.toString();

         return jso;

     }

Bootstrap动态轮播的更多相关文章

  1. 基于bootstrap的轮播广告页，带图片和文字

    <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8& ...

  2. bootstrap 获得轮播中的索引 getActiveIndex

    今天想用bootstrap做一个轮播,当轮播滚到每张图的时候,在页面下面就显示相对应的内容,那么问题来了:我肯定需要知道当前活动(显示图片)的索引号,那么bootstrap的轮播组件要怎么获得这个索引 ...

  3. Bootstrap中轮播图

    Bootstrap中轮播图插件叫作Carousel,为了清晰的表明每个标签在这里是什么意思,我把解释写在了下面的代码中. <!-- 以下容器就是整个轮播图组件的整体, 注意该盒子必须加上 cla ...

  4. 聊一聊 bootstrap 的轮播图插件

    今天做工作的时候,轻车熟路的做完,又用到了bootstrap的轮播图,觉得有必要安利一下这个插件,如果你需要的轮播图.功能不需要太炫酷,那么bootstrap的插件是你的首要选择. 使用方式 引入js ...

  5. Bootstrap幻灯轮播如何支持触屏左右滑动手势？

    最近ytkah在学习用bootstrap搭建网站,Bootstrap能自适应pc端和手机端,并且移动设备优先,适合现如今移动营销.bootstrap是封装好的框架,需要某些功能只需调用相应的组件就可以 ...

  6. bootstrap 图片轮播效果

    <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="http: ...

  7. Append加载动态轮播

    前几天遇到了些小麻烦,不过很快就解决了.之所以要记下来是因为作为一名前端的程序员,要理解页面的加载顺序是最重要的.要不然自己写程序意外的出现bug~~ 刚开始写利用Append的时候,利用火狐的fir ...

  8. 全面解析Bootstrap图片轮播效果

    http://www.jb51.net/article/75806.htm 一 . 结构分析 一个轮播图片主要包括三个部分: ☑ 轮播的图片 ☑ 轮播图片的计数器 ☑ 轮播图片的控制器 第一步:设计轮 ...

  9. bootstrap 获得轮播中的索引或当前活动的焦点对象

    今天用bootstrap做一个轮播,当轮播滚到每张图的时候,在页面下面就显示相对应的内容,那么问题来了:为了轮播图的可扩展性,我们肯定需要知道当前活动(显示图片)的索引号,查了bootstrap文档, ...

随机推荐

  1. BZOJ2820: YY的GCD(反演)

    题解 题意 题目链接 Sol 反演套路题.. 不多说了,就是先枚举一个质数,再枚举一个约数然后反演一下. 最后可以化成这样子 \[\sum_{i = 1}^n \frac{n}{k} \frac{n} ...

  2. 【读书笔记】iOS-成为一名开发者

    iOS开发者计划是按年付费的,在过期前60天可以开始续费.如果你不续费的话,你将无法发布应用.另外苹果会吊销你的开发者证书和发布证书.最后,苹果将你在iTunes App Store上的所有应用下架. ...

  3. python自动化开发-6-常用模块-续

    python的常用模块(续) shelve模块:是一个简单的k,v将内存数据通过文件持久化的模块,可以持久化任何pickle可支持的python数据格式. configparser模块:对配置文件进行 ...

  4. Python从入门到精通

    最近研究了一下Python,名不虚传,确实挺精彩. 学习一门新的语言,我认为从入门到精通的做法是:下SDK.装IDE.练教程.结合工作应用.不断踩坑进阶.梳理总结 1.下SDK(2.7.15) 下载地 ...

  5. 测试思想 QA的价值体现

    QA的价值体现 by:授客 QQ:1033553122 1．  缺陷挖掘价值 QA人员一个很重要的价值就是在尽可能短的时间内找出尽可能多的缺陷. 某种意义上说,缺陷直观的反应了产品的质量,QA发现的有 ...

  6. 听说你还不会用Dagger2？Dagger2 For Android最佳实践教程

    前言 Dagger2是现在非常火的一个依赖注入框架,目前由Google维护,在Github上面已经有12K star了.Dagger2的入门门槛其实是比较高的,据了解,目前有很多Android工程师对 ...

  7. (网页)textarea去掉回车换行

    转自CSDN: 1,把textarea内输入的内容中有回车换行的转成<br />传给后台, var content = $("#text").val().replace ...

  8. maven管理项目的特点

    Maven介绍 我们在开发项目的过程中,会使用一些开源框架.第三方的工具等等,这些都是以jar包的方式被项目所引用,并且有些jar包还会依赖其他的jar包,我们同样需要添加到项目中,所有这些相关的ja ...

  9. 通过日志过滤的方法，统计每天内容详情页面的PV数

    1.目的: 每天凌晨0点1分统计用户点击进入内容详情页的次数,对内容点击量形成榜单. 2.分析: A./data/log/epg.access.log日志实时打印用户访问页面的日志,并且每天凌晨0点会 ...

  10. 如何使用C语言的面向对象

    我们都知道,C++才是面向对象的语言,但是C语言是否能使用面向对象的功能? (1)继承性 typedef struct _parent { int data_parent; }Parent; type ...