zoukankan      html  css  js  c++  java
  • 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     }
  • 相关阅读:
    SCILAB简介[z]
    UG OPEN API编程基础 2约定及编程初步
    Office 2003与Office 2010不能共存的解决方案
    UG OPEN API 编程基础 3用户界面接口
    NewtonRaphson method
    UG OPEN API编程基础 13MenuScript应用
    UG OPEN API编程基础 14API、UIStyler及MenuScript联合开发
    UG OPEN API编程基础 4部件文件的相关操作
    UG OPEN API编程基础 1概述
    16 UG Open的MFC应用
  • 原文地址:https://www.cnblogs.com/javallh/p/8298087.html
Copyright © 2011-2022 走看看