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实现动态轮播图实战的更多相关文章

  1. 2.bootstrap练习笔记-轮播图

    bootstrap练习笔记-轮播图 1.要使用轮播图,首先要将其放在一个主div里面 设置id为myCaroysel class为carousel slide 设置id是标识这个div是轮播图,等到l ...

  2. js轮播图和bootstrap中的轮播图

    js中的轮播图案例: <!DOCTYPE html><html lang="en"> <head> <meta charset=" ...

  3. （新手向）基于Bootstrap的简单轮播图的手机实现

    个人电脑里存了不少适合手机欣赏的图片,但是放手机里看是件很占据资源的事.鉴于家里有一台电脑经常开着,正好用来做家庭局域网共享,于是笔者就设想通过一种比较简单环保的思路.通过手机访问电脑内的图片. 首先 ...

  4. Bootstrap插件-carousel(轮播图)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 移动web——bootstrap响应式轮播图

    基本介绍 1.bootstrap有轮播图的模板,我们只需要改动下就行. 2.这里我们将介绍桌面版本和移动版本最后是综合版本 桌面版本 1.这里的图片设置是有窍门的,不再去添加img标签,而是作为a标签 ...

  6. JavaScript实现动态轮播图效果

    功能描述: 1.鼠标经过 左右侧箭头显示,鼠标离开 箭头隐藏 2.动态添加底部小圆圈并绑定单击事件,并且让小圆圈的点击事件和左右箭头点击事件同步 3.拷贝第一张图片添加到ul最后可以实现动态添加图片 ...

  7. JS 实现动态轮播图

    JavaScript实现轮播图思路 + html/css + js源码 整个轮播图的效果是通过js代码,操作dom, 拿到html我们需要的元素,控制整个ul的距离浏览器左边的位置,让排好的图片依次出 ...

  8. Bootstrap 我的学习记录4 轮播图的使用和理解

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...

  9. Bootstrap 轮播图的使用和理解

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...

  10. 原生JS实现移动端轮播图

    功能描述: 自动无缝轮播图片,底部小圆点跟图片保持一致:手指左右移动轮播图,移动距离大于50px播放下一张(或上一张),小于50px则回弹 具体功能实现: 1.定时器 自动轮播图片 先声明一个inde ...

随机推荐

  1. 3 分钟了解 NVIDIA 新出的 H200

    英伟达在 2023 年全球超算大会上发布了备受瞩目的新一代 AI 芯片--H200 Tensor Core GPU.相较于上一代产品 H100,H200 在性能上实现了近一倍的提升,内存容量翻倍,带宽 ...

  2. [转帖]Nginx 安全优化

    目录 前言 1.使用 SSL/TLS 证书 2.使用安全密钥交换机制 3.禁用旧的 SSL/TLS 协议 4.禁用 SSL/TLS 弱密码套件 5.禁用不需要的 HTTP 方法 6.防止缓冲区溢出攻击 ...

  3. PG数据库存储验证

    PG数据库存储验证 背景 最近学习了SQLServer数据库的varchar和nvarchar的存储 想到PG数据库其实没让选择字符集,也没有nvarchar 所以想学习一下nvarchar的使用情况 ...

  4. [转帖]Linux三剑客之sed的初阶使用

    https://www.jianshu.com/p/ceea435635a2 大多数情况下,对于文件内容的修改需要依赖交互式的软件来实现,例如vim修改文件的内容则是依赖光标的移动和修改操作来完成对文 ...

  5. [转帖]Java和Scala的前世今生

    第一部分:Java 计算机语言介绍 第一代语言:机器语言.指令以二进制代码形式存在 第二代语言:汇编语言.使用助记符表示一条机器指令 第三代语言:高级语言 C.Pascal.Fortran面向过程的语 ...

  6. 人工智能GPT科普知识的简单总结

    人工智能GPT相关知识的简单总结 背景 工作已经很久, 工作十几年来有过好多波新的技术浪潮. 但是每次都离技术前沿比较远. 最近发现只低头拉车是一个没有前途的行为. 人生很短, 选择很重要, 不仅要低 ...

  7. [转帖]浅谈Armv8-A处理器

    https://www.elecfans.com/emb/dsp/202208291886182.html 众所周知,ARM是一家设计并授权处理器和相应IP(比如互连总线,中断处理器,图像处理器等等) ...

  8. 【转贴】西数全新推出企业级金盘SSD：2.5寸U.2接口、最大7.68TB、96层TLC

    西数全新推出企业级金盘SSD:2.5寸U.2接口.最大7.68TB.96层TLC https://www.cnbeta.com/articles/tech/951353.htm 硬件发展日新月异 &q ...

  9. flex 布局子元素被挤压的问题

    Flex 意为 "弹性布局",是一种在开发静态页面过程中常用的布局模式. 开发购物车使用flex布局的时候遇到的一种场景:子元素被挤压 具体如图所示, 当商品名称超出两行文字时显示 ...

  10. 插件时间格式处理moment如何使用

    第1步下载插件 cnpm i moment -S 第2步 在main.js中去使用 在main.js中 注册全局过滤器 fmtdata是等会你用的 可以自定义 fmtdata直接可以调用.是一个过滤器 ...