spring boot+bootstrap实现动态轮播图实战

最新推荐文章于 2024-06-07 15:08:13 发布

罗汉爷

最新推荐文章于 2024-06-07 15:08:13 发布

阅读量4k

点赞数 5

分类专栏： # 玩转Spring Boot Java项目实战文章标签：轮播图 bootstrap轮播图

本文链接：https://blog.csdn.net/IndexMan/article/details/111315831

版权

玩转Spring Boot 同时被 2 个专栏收录

101 篇文章 16 订阅

订阅专栏

Java项目实战

100 篇文章 11 订阅

订阅专栏

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="images/s1.jpg" class="d-block w-100" alt="..." />
              </div>
              <div class="carousel-item">
                <img src="images/s2.jpg" class="d-block w-100" alt="..." />
              </div>
              <div class="carousel-item">
                <img src="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>

实现效果

在这里插入图片描述

罗汉爷

关注

5
点赞
踩
26

收藏

觉得还不错? 一键收藏
6
评论
spring boot+bootstrap实现动态轮播图实战

1.bootstrap轮播图最近开发了个网站需要用到轮播图，正好前端用的事Bootstrap，这里就实战一下。前提条件：bootstrap4.5jquery3张大小适中图片实现效果：代码<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-widt
复制链接

扫一扫