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

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     }

Bootstrap动态轮播相关推荐

spring boot+bootstrap实现动态轮播图实战
1.bootstrap轮播图最近开发了个网站需要用到轮播图,正好前端用的是Bootstrap,这里就实战一下. 水平一般能力有限,仅供参考. 前提条件: bootstrap4.5 jquery 3张 ...
php自动轮播图代码,JavaScript如何实现动态轮播图效果？（代码示例）
本篇文章给大家带来的内容是JavaScript如何实现动态轮播图效果?(代码示例).有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 功能描述: 1.鼠标经过左右侧箭头显示,鼠标离开 ...
聊一聊 bootstrap 的轮播图插件
今天做工作的时候,轻车熟路的做完,又用到了bootstrap的轮播图,觉得有必要安利一下这个插件,如果你需要的轮播图.功能不需要太炫酷,那么bootstrap的插件是你的首要选择. 使用方式引入js ...
如何使用bootstrap实现轮播图？
大家好,我是雄雄,今天给大家分享的是如何使用bootstrap实现轮播图,美观大方且兼容性还好! 轮播图就不做过多的介绍了,大家都知道,只是轮播的实现有多种方式,例如使用纯js写,费时费力,且还不适用 ...
jQueryQQ音乐动态轮播图
下面是小编用jQuery写的QQ音乐官网的动态轮播图,希望可以帮助到有需要的小伙伴先来看一下效果吧~ 分析: 静态: <div class="gedan"><d ...
Echarts柱状图和折线图动态轮播展示
想通过Echarts实现动态轮播功能,代码如下原创不易,转载请附上原创谢谢, 以下代码复制可用 var dateCity = ["北京","上海"," ...
Bootstrap焦点轮播图
Bootstrap焦点轮播图焦点轮播图所谓的焦点轮播图就是,点击图片左右两边的箭头或者是下面的1.2.3.4.5.6的数字图标时,图片进行切换的效果. 基本用法 1.布局与样式整个焦点轮播图由三 ...
Bootstrap之轮播图
2019独角兽企业重金招聘Python工程师标准>>>  Bootstrap 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式.除 ...
bootstrap中轮播图、模态框、提示框/弹出框、滚动监听、弹性布局、响应式flex、多媒体对象
轮播图: bootstrap封装了轮播图的功能,其具体如下: 类名描述 .carousel 创建一个轮播图块的容器,实质是做布局用:且此容器应该有一个di属性,其属性值提供给下面左右按钮href锚点 ...

Bootstrap动态轮播

Bootstrap动态轮播

Bootstrap动态轮播相关推荐

最新文章

热门文章