spring boot+bootstrap實現動態輪播圖實戰

羅漢爺發表於2020-12-17
Spring Boot

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>

實現效果

在這裡插入圖片描述

相關文章