spring boot+bootstrap实现动态轮播图实战
1.bootstrap轮播图
最近开发了个网站需要用到轮播图，正好前端用的是Bootstrap，这里就实战一下。
水平一般能力有限，仅供参考。
前提条件：
- bootstrap4.5
- jquery
- 3张大小适中图片
实现效果：
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>bootstrap轮播图实战</title>
<link
href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css"
rel="stylesheet"
/>
<style type="text/css">
.carousel-item {
height: 400px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-8">
<div
id="carouselExampleIndicators"
class="carousel slide"
data-ride="carousel"
data-interval="1500"
>
<ol class="carousel-indicators">
<li
data-target="#carouselExampleIndicators"
data-slide-to="0"
class="active"
></li>
<li
data-target="#carouselExampleIndicators"
data-slide-to="1"
></li>
<li
data-target="#carouselExampleIndicators"
data-slide-to="2"
></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="data:images/s1.jpg" class="d-block w-100" alt="..." />
</div>
<div class="carousel-item">
<img src="data:images/s2.jpg" class="d-block w-100" alt="..." />
</div>
<div class="carousel-item">
<img src="data:images/s3.jpg" class="d-block w-100" alt="..." />
</div>
</div>
<a
class="carousel-control-prev"
href="#carouselExampleIndicators"
role="button"
data-slide="prev"
>
<span
class="carousel-control-prev-icon"
aria-hidden="true"
></span>
<span class="sr-only">Previous</span>
</a>
<a
class="carousel-control-next"
href="#carouselExampleIndicators"
role="button"
data-slide="next"
>
<span
class="carousel-control-next-icon"
aria-hidden="true"
></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script>
</body>
</html>
2.实现动态可配置轮播图
静态的轮播图不是最终目的，下面就结合spring boot+thymeleaf+bootstrap来实现个动态轮播图，支持在后台动态添加扩展轮播图。
数据接口
@PostMapping("list")
@ResponseBody
public Object list(String gridPager) {
Pager pager = JsonUtil.getObjectFromJson(gridPager, Pager.class);
Map<String, Object> parameters = null;
if(Validator.isNullOrEmpty(pager.getParameters())){
parameters = new HashMap<>();
}else{
parameters = pager.getParameters();
}
// 构建查询条件
QueryWrapper<Slide> queryWrapper = new QueryWrapper<>();
queryWrapper.allEq(parameters);
Page<Slide> list = (Page<Slide>) slideService.page(new Page<Slide>(pager.getNowPage(), pager.getPageSize()), queryWrapper);
makeGridResult(parameters, pager, list);
return parameters;
}
- 数据结构
[{
"createTime": 1606661677000,
"createUser": "admin",
"id": 2,
"img": "/api/file/img/2020_12_4aea68629ddc4f5db015402bfcbccabe.png",
"summary": "",
"title": "Spring Boot图书管理系统",
"updateTime": 1607838814000,
"updateUser": "admin",
"url": "/article/32"
}, {
"createTime": 1606661712000,
"createUser": "admin",
"id": 3,
"img": "/api/file/img/2020_12_f6142c52c9394181b117a7974fb21528.png",
"summary": "",
"title": "Python文件上传下载",
"updateTime": 1607839295000,
"updateUser": "admin",
"url": "/article/34"
}]
前端代码
<!--轮播图-->
<div class="col-lg-8">
<div class="carousel slide" id="carousel-pic" data-ride="carousel" data-interval="1500">
<ol class="carousel-indicators">
<li th:each="slide,stat:${session.slideList}" th:class="${stat.index==0}?'active'" th:attr="data-slide-to=${stat.index}" data-target="#carousel-pic">
</li>
</ol>
<div class="carousel-inner">
<div class="item" th:each="slide,stat:${session.slideList}" th:classappend="${stat.index==0}? 'active'">
<a href="https://blog.csdn.net/indexman/article/category/8483626" th:href="${slide.url}" target="_blank">
<img alt="" th:src="${slide.img}"/>
<div class="carousel-caption">
<h4 th:text="${slide.title}">
Spring Boot
</h4>
<p th:text="${slide.summary}">
Spring Boot是当下最流行的Java企业级应用开发框架，学习Spring Boot尽在此站。
</p>
</div>
</a>
</div>
</div>
<a data-slide="prev" href="#carousel-pic" class="left carousel-control" role="button">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a data-slide="next" href="#carousel-pic" class="right carousel-control" role="button">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<div class="list-group" id="submenu-list">
</div>
</div>
实现效果
spring boot+bootstrap实现动态轮播图实战的更多相关文章
- 2.bootstrap练习笔记-轮播图
bootstrap练习笔记-轮播图 1.要使用轮播图,首先要将其放在一个主div里面 设置id为myCaroysel class为carousel slide 设置id是标识这个div是轮播图,等到l ...
- js轮播图和bootstrap中的轮播图
js中的轮播图案例: <!DOCTYPE html><html lang="en"> <head> <meta charset=" ...
- （新手向）基于Bootstrap的简单轮播图的手机实现
个人电脑里存了不少适合手机欣赏的图片,但是放手机里看是件很占据资源的事.鉴于家里有一台电脑经常开着,正好用来做家庭局域网共享,于是笔者就设想通过一种比较简单环保的思路.通过手机访问电脑内的图片. 首先 ...
- Bootstrap插件-carousel(轮播图)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 移动web——bootstrap响应式轮播图
基本介绍 1.bootstrap有轮播图的模板,我们只需要改动下就行. 2.这里我们将介绍桌面版本和移动版本最后是综合版本 桌面版本 1.这里的图片设置是有窍门的,不再去添加img标签,而是作为a标签 ...
- JavaScript实现动态轮播图效果
功能描述: 1.鼠标经过 左右侧箭头显示,鼠标离开 箭头隐藏 2.动态添加底部小圆圈并绑定单击事件,并且让小圆圈的点击事件和左右箭头点击事件同步 3.拷贝第一张图片添加到ul最后可以实现动态添加图片 ...
- JS 实现动态轮播图
JavaScript实现轮播图思路 + html/css + js源码 整个轮播图的效果是通过js代码,操作dom, 拿到html我们需要的元素,控制整个ul的距离浏览器左边的位置,让排好的图片依次出 ...
- Bootstrap 我的学习记录4 轮播图的使用和理解
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...
- Bootstrap 轮播图的使用和理解
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...
- 原生JS实现移动端轮播图
功能描述: 自动无缝轮播图片,底部小圆点跟图片保持一致:手指左右移动轮播图,移动距离大于50px播放下一张(或上一张),小于50px则回弹 具体功能实现: 1.定时器 自动轮播图片 先声明一个inde ...
随机推荐
- SV 并发线程
内容 assign d = a & b; assign e = b | c; begin...end之间的语句是串行执行的 fork....join语句是并行执行的 逻辑仿真工具中的并发性 仿 ...
- 【转帖】让互联网更快：新一代QUIC协议在腾讯的技术实践分享
https://www.cnblogs.com/jb2011/p/8458549.html 本文来自腾讯资深研发工程师罗成在InfoQ的技术分享. 1.前言 如果:你的 App,在不需要任何修改的情况 ...
- [转帖]Arm CPU风起，补齐国产大芯片最后一块拼图 | 甲子光年
https://rmh.pdnews.cn/Pc/ArtInfoApi/article?id=30960014 最近一年,国产CPU火了. 今年6月24日,龙芯中科在科创板挂牌上市,公司主营自研Loo ...
- [转帖]疑问：进程在竞争CPU时并没有真正运行，为什么还会导致系统的负载升高？
疑问:进程在竞争CPU时并没有真正运行,为什么还会导致系统的负载升高? 因为存在CPU上下文切换. linux系统说明 Linux是一个多任务操作系统,它支持远大于CPU数量的任务同时运行.当然,这些 ...
- 手工创建一个带sticky模块的nginx镜像 并且实现容器化负载均衡的方法
最近想进行容器化运行的nginx反向代理负载均衡服务. 找了一下 dockerhub上面的 nginx 发现里面不包含 sticky模块. 会报错为: nginx: [emerg] unknown d ...
- ggrep让多行日志-无处遁形！
相信大家都很喜欢用grep指令,查一下项目中有没有出错的,然后通过logid搜索相关出错的日志和一些关键参数,但是在多行日志的情况下就很难处理了,比如okhttp拦截器中分别打印了url,param和 ...
- JAVA多线程并发编程-避坑指南
作者:京东零售 肖朋伟 一.前言 开发过程中,多线程的应用场景可谓十分广泛,可以充分利用服务器资源,提高程序处理速度.我们通常也会使用池化技术,去避免频繁创建和销毁线程. 本篇旨在基于编码规范.工作中 ...
- vue中v-model修饰符的使用和组件使用v-model
1.lazy 修饰器 lazy修饰器在input框中的表现效果是: 当你失去焦点后值才会跟新. 它的跟新时机是失去焦点后 这个修饰器在项目中运用的场景较少 <template> <d ...
- 【VictoriaMetrics源码阅读】: vm中对map的优化
作者:张富春(ahfuzhang),转载时请注明作者和引用链接,谢谢! cnblogs博客 zhihu github 公众号:一本正经的瞎扯 具体代码请看:https://github.com/ahf ...
- 基于50W携程出行攻略构建事件图谱（含码源）：交通工具子图谱、订酒店吃饭事件图谱等
基于50W携程出行攻略构建事件图谱(含码源):交通工具子图谱.订酒店吃饭事件图谱等 项目构成 本项目由两个部分的组成,具体包括语料的获取以及基于语料的事件挖掘两个部分,具体项目目录包括: news_s ...