Bootstrap动态轮播

清疚 2022-05-13 10:42 207阅读 0赞

原文地址：[https://www.cnblogs.com/javallh/p/8298087.html][https_www.cnblogs.com_javallh_p_8298087.html]

# [Bootstrap动态轮播][https_www.cnblogs.com_javallh_p_8298087.html] #

一、前台界面

![复制代码][copycode.gif]

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     
    16     <ol class="carousel-indicators" id="caro">
    17     </ol>   
    18     
    19     <div class="carousel-inner" id="car">
    20     
    21     </div>
    22     
    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>

![复制代码][copycode.gif]

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

![复制代码][copycode.gif]

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     }

![复制代码][copycode.gif]

[https_www.cnblogs.com_javallh_p_8298087.html]: https://www.cnblogs.com/javallh/p/8298087.html
[copycode.gif]: /images/20220513/65579ee4023b481c8adfdecbe858a8e8.png