1.bootstrap轮播图
最近开发了个网站需要用到轮播图&＃xff0c;正好前端用的是Bootstrap&＃xff0c;这里就实战一下。
水平一般能力有限&＃xff0c;仅供参考。
前提条件&＃xff1a;
- bootstrap4.5
- jquery
- 3张大小适中图片
实现效果&＃xff1a;
代码
<html lang&＃61;"en"><head><meta charset&＃61;"UTF-8" /><meta name&＃61;"viewport" content&＃61;"width&＃61;device-width, initial-scale&＃61;1.0" /><title>bootstrap轮播图实战title><linkhref&＃61;"https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css"rel&＃61;"stylesheet"/><style type&＃61;"text/css">.carousel-item {height: 400px;}style>head><body><div class&＃61;"container"><div class&＃61;"row"><div class&＃61;"col-lg-8"><divid&＃61;"carouselExampleIndicators"class&＃61;"carousel slide"data-ride&＃61;"carousel"data-interval&＃61;"1500"><ol class&＃61;"carousel-indicators"><lidata-target&＃61;"#carouselExampleIndicators"data-slide-to&＃61;"0"class&＃61;"active">li><lidata-target&＃61;"#carouselExampleIndicators"data-slide-to&＃61;"1">li><lidata-target&＃61;"#carouselExampleIndicators"data-slide-to&＃61;"2">li>ol><div class&＃61;"carousel-inner"><div class&＃61;"carousel-item active"><img src&＃61;"images/s1.jpg" class&＃61;"d-block w-100" alt&＃61;"..." />div><div class&＃61;"carousel-item"><img src&＃61;"images/s2.jpg" class&＃61;"d-block w-100" alt&＃61;"..." />div><div class&＃61;"carousel-item"><img src&＃61;"images/s3.jpg" class&＃61;"d-block w-100" alt&＃61;"..." />div>div><aclass&＃61;"carousel-control-prev"href&＃61;"#carouselExampleIndicators"role&＃61;"button"data-slide&＃61;"prev"><spanclass&＃61;"carousel-control-prev-icon"aria-hidden&＃61;"true">span><span class&＃61;"sr-only">Previousspan>a><aclass&＃61;"carousel-control-next"href&＃61;"#carouselExampleIndicators"role&＃61;"button"data-slide&＃61;"next"><spanclass&＃61;"carousel-control-next-icon"aria-hidden&＃61;"true">span><span class&＃61;"sr-only">Nextspan>a>div>div>div>div><script src&＃61;"https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js">script><script src&＃61;"https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js">script>body>
html>
2.实现动态可配置轮播图
静态的轮播图不是最终目的&＃xff0c;下面就结合spring boot&＃43;thymeleaf&＃43;bootstrap来实现个动态轮播图&＃xff0c;支持在后台动态添加扩展轮播图。
数据接口
&＃64;PostMapping("list")&＃64;ResponseBodypublic Object list(String gridPager) {Pager pager &＃61; JsonUtil.getObjectFromJson(gridPager, Pager.class);Map<String, Object> parameters &＃61; null;if(Validator.isNullOrEmpty(pager.getParameters())){parameters &＃61; new HashMap<>();}else{parameters &＃61; pager.getParameters();}QueryWrapper<Slide> queryWrapper &＃61; new QueryWrapper<>();queryWrapper.allEq(parameters);Page<Slide> list &＃61; (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&＃61;"col-lg-8"><div class&＃61;"carousel slide" id&＃61;"carousel-pic" data-ride&＃61;"carousel" data-interval&＃61;"1500"><ol class&＃61;"carousel-indicators"><li th:each&＃61;"slide,stat:${session.slideList}" th:class&＃61;"${stat.index&＃61;&＃61;0}?&＃39;active&＃39;" th:attr&＃61;"data-slide-to&＃61;${stat.index}" data-target&＃61;"#carousel-pic">li>ol><div class&＃61;"carousel-inner"><div class&＃61;"item" th:each&＃61;"slide,stat:${session.slideList}" th:classappend&＃61;"${stat.index&＃61;&＃61;0}? &＃39;active&＃39;"><a href&＃61;"https://blog.csdn.net/indexman/article/category/8483626" th:href&＃61;"${slide.url}" target&＃61;"_blank"><img alt&＃61;"" th:src&＃61;"${slide.img}"/><div class&＃61;"carousel-caption"><h4 th:text&＃61;"${slide.title}">Spring Booth4><p th:text&＃61;"${slide.summary}">Spring Boot是当下最流行的Java企业级应用开发框架&＃xff0c;学习Spring Boot尽在此站。p>div>a>div>div><a data-slide&＃61;"prev" href&＃61;"#carousel-pic" class&＃61;"left carousel-control" role&＃61;"button"><span class&＃61;"glyphicon glyphicon-chevron-left">span>a><a data-slide&＃61;"next" href&＃61;"#carousel-pic" class&＃61;"right carousel-control" role&＃61;"button"><span class&＃61;"glyphicon glyphicon-chevron-right">span>a>div><div class&＃61;"list-group" id&＃61;"submenu-list">div>div>
实现效果
京公网安备 11010802041100号