一、前台界面
1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 4 <html> 5 <head> 6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 7 <title>Insert title here</title> 8 <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css"> 9 <script src="bootstrap-3.3.7-dist/js/jquery.js"></script> 10 <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script> 11 </head> 12 <body> 13 <div class="container"> 14 <div id="myCarousel" class="carousel slide" > 15 <!-- 轮播（Carousel）指标 --> 16 <ol class="carousel-indicators" id="caro"> 17 </ol> 18 <!-- 轮播（Carousel）项目 --> 19 <div class="carousel-inner" id="car"> 20 21 </div> 22 <!-- 轮播（Carousel）导航 --> 23 <a class="carousel-control left" href="#myCarousel" 24 data-slide="prev">‹</a> 25 <a class="carousel-control right" href="#myCarousel" 26 data-slide="next">›</a> 27 </div> 28 </div> 29 </body> 30 <script type="text/javascript"> 31 $(function () { 32 $(‘#myCarousel‘).carousel({ 33 interval: 2000 34 }); 35 $.ajax({ 36 url:"selectUserimage.do", 37 type:"post", 38 async:false, 39 dataType:"json", 40 success:function(data){ 41 var obj = $("#car"); 42 var obj1 = $("#caro"); 43 var op1 = "<li data-target=‘#myCarousel‘ data-slide-to=‘"+0+"‘></li>"; 44 var op = "<div class=‘item active‘><img src=‘"+data[0].userimage+"‘ alt=‘Second slide‘></div>"; 45 obj.append(op); 46 obj1.append(op1); 47 for(var i=0;i<data.length;i++){ 48 alert(data[i].userimage!=""); 49 if(data[i].userimage!=""){ 50 var op1 = "<li data-target=‘#myCarousel‘ data-slide-to=‘"+i+"‘></li>"; 51 var op = "<div class=‘item‘><img src=‘"+data[i].userimage+"‘ alt=‘Second slide‘></div>"; 52 obj1.append(op1); 53 obj.append(op); 54 } 55 56 } 57 } 58 }) 59 }); 60 61 </script> 62 </html>
二、后台只需要返回一个json格式的就可以了
1 @RequestMapping(value="selectUserimage",produces="text/html;charset=utf-8") 2 public @ResponseBody String selectAllUserimage(){ 3 List<Student> slist = studentService.selectAll(); 4 JSONArray json = JSONArray.fromObject(slist); 5 String jso = json.toString(); 6 return jso; 7 }
