赞助

Bootstrap动态轮播

一、前台界面

 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">&lsaquo;</a>
25     <a class="carousel-control right" href="#myCarousel" 
26        data-slide="next">&rsaquo;</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     }

 

posted @ 2018-01-16 18:23  念念不忘、  阅读(1453)  评论(0)  编辑  收藏  举报