关键词：
bootstrap框架系列案例
| 案例 | 网址 |
|---|---|
| 【前端】Bootstrap案例：导航栏 | https://blog.csdn.net/karshey/article/details/127372691 |
| 【前端】Bootstrap案例：轮播图 | https://blog.csdn.net/karshey/article/details/127388528 |
| 【前端】Bootstrap案例：网格系统、鼠标悬浮动画显示、响应式布局 | https://blog.csdn.net/karshey/article/details/127392879 |
文章目录
目标
- 大屏加载大图，小屏加载小图
- 动态渲染图片
- 优化：监听屏幕大小，同样是大图/小图时不重新渲染
其实：还有节流操作，但这里没写。
代码
0.结构
就是你了！直接复制代码。
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<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="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-target="#carouselExampleIndicators" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleIndicators" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</div>
分析一下代码：
- img显然是放轮播的图片的
- 下面的button有pre、next等字样，大胆猜测是分页
- 上面的0、1、2应该就是指示器
所以我们可以先把图片放进去看看效果。
如下，就是这样！
1.加入js：动态加载数据
上面我们把数据写进了html，这些数据是静态的。
但是我们希望大屏加载大图，小屏加载小图，也就是说，我们要监听窗口大小，根据窗口大小来加载图片数据。
1.1 动态加载大图数据
我们一般用对象来存数据。
var banners = [ id: 0, bigUrl: 'img/banner0.png', smUrl: 'img/banner0_sm.png' ,
id: 1, bigUrl: 'img/banner1.png', smUrl: 'img/banner1_sm.png' ,
id: 2, bigUrl: 'img/banner2.png', smUrl: 'img/banner2_sm.png' ]
把html里的三个class="carousel-inner"注释掉，改成用js加载图片：
// 等dom页面加载完后
$(function ()
// 三个轮播图的图片链接
var banners = [ id: 0, bigUrl: 'img/banner0.png', smUrl: 'img/banner0_sm.png' ,
id: 1, bigUrl: 'img/banner1.png', smUrl: 'img/banner1_sm.png' ,
id: 2, bigUrl: 'img/banner2.png', smUrl: 'img/banner2_sm.png' ]
var bannerHtmlString = ''
banners.forEach(function (item, index)
var isActive = index === 0 ? "active" : ""
bannerHtmlString += `<div class="carousel-item $isActive">
<img src="$item.bigUrl" class="d-block w-100" alt="...">
</div>`
)
$('.carousel-inner').append(bannerHtmlString)
)
刷新后效果一样。
1.2 动态加载小图数据：监听窗口大小
先监听一下窗口大小：
//监听窗口大小
$(window).on('resize',function()
console.log($(this).outerWidth());
)
然后就可以写了：
// 等dom页面加载完后
$(function ()
// 三个轮播图的图片链接
var banners = [ id: 0, bigUrl: 'img/banner0.png', smUrl: 'img/banner0_sm.png' ,
id: 1, bigUrl: 'img/banner1.png', smUrl: 'img/banner1_sm.png' ,
id: 2, bigUrl: 'img/banner2.png', smUrl: 'img/banner2_sm.png' ]
//监听窗口大小
$(window).on('resize',function()
// console.log($(this).outerWidth());
var isBigScreen=$(this).outerWidth() > 576 //大于576就是大屏
renderBanner(banners,isBigScreen)
)
//不触发的话就没有图,这里手动触发
$(window).trigger('resize')
function renderBanner(banners,isBigScreen)
var bannerHtmlString = ''
banners.forEach(function (item, index)
var isActive = index === 0 ? "active" : ""
var imgUrl=isBigScreen?item.bigUrl:item.smUrl
bannerHtmlString += `<div class="carousel-item $isActive">
<img src="$imgUrl" class="d-block w-100" alt="...">
</div>`
)
//这里要在添加前清空，不然会添加无数个节点
$('.carousel-inner').empty().append(bannerHtmlString)
)
2.优化：同时是大图、小图时不重新渲染
加了imgSize。
// 等dom页面加载完后
$(function ()
// 三个轮播图的图片链接
var banners = [ id: 0, bigUrl: 'img/banner0.png', smUrl: 'img/banner0_sm.png' ,
id: 1, bigUrl: 'img/banner1.png', smUrl: 'img/banner1_sm.png' ,
id: 2, bigUrl: 'img/banner2.png', smUrl: 'img/banner2_sm.png' ]
var imgSize = 'none'//none big small
//监听窗口大小
$(window).on('resize', function ()
// console.log($(this).outerWidth());
var isBigScreen = $(this).outerWidth() > 576 //大于576就是大屏
//同时大图和同时小图不重新渲染
if(imgSize==='big'&&isBigScreen)
return;
if(imgSize==='small'&&!isBigScreen)
return;
//否则可以渲染
renderBanner(banners, isBigScreen)
)
//不触发的话就没有图,这里手动触发
$(window).trigger('resize')
function renderBanner(banners, isBigScreen)
var bannerHtmlString = ''
imgSize = isBigScreen ? 'big' : 'small'
banners.forEach(function (item, index)
var isActive = index === 0 ? "active" : ""
var imgUrl = isBigScreen ? item.bigUrl : item.smUrl
bannerHtmlString += `<div class="carousel-item $isActive">
<img src="$imgUrl" class="d-block w-100" alt="...">
</div>`
)
//这里要在添加前清空，不然会添加无数个节点
$('.carousel-inner').empty().append(bannerHtmlString)
)
总体代码
html
<!-- 轮播图 -->
<!--
当页面加载完成后轮播图自动轮播：data-ride="carousel"
carouselExampleIndicators：id与指示器里的data-target对应，一点就切换到对应data-slide-to
-->
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<!-- 指示器 -->
<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="img/banner0.png" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="img/banner1.png" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="img/banner2.png" class="d-block w-100" alt="...">
</div> -->
</div>
<button class="carousel-control-prev" type="button" data-target="#carouselExampleIndicators" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleIndicators" data-slide="next">
<span class="carousel-control-next-icon"></span>
</button>
</div>
js
// 等dom页面加载完后
$(function ()
// 三个轮播图的图片链接
var banners = [ id: 0, bigUrl: 'img/banner0.png', smUrl: 'img/banner0_sm.png' ,
id: 1, bigUrl: 'img/banner1.png', smUrl: 'img/banner1_sm.png' ,
id: 2, bigUrl: 'img/banner2.png', smUrl: 'img/banner2_sm.png' ]
var imgSize = 'none'//none big small
//监听窗口大小
$(window).on('resize', function ()
// console.log($(this).outerWidth());
var isBigScreen = $(this).outerWidth() > 576 //大于576就是大屏
//同时大图和同时小图不重新渲染
if(imgSize==='big'&&isBigScreen)
return;
if(imgSize==='small'&&!isBigScreen)
return;
//否则可以渲染
renderBanner(banners, isBigScreen)
)
//不触发的话就没有图,这里手动触发
$(window).trigger('resize')
function renderBanner(banners, isBigScreen)
var bannerHtmlString = ''
imgSize = isBigScreen ? 'big' : 'small'
banners.forEach(function (item, index)
var isActive = index === 0 ? "active" : ""
var imgUrl = isBigScreen ? item.bigUrl : item.smUrl
bannerHtmlString += `<div class="carousel-item $isActive">
<img src="$imgUrl" class="d-block w-100" alt="...">
</div>`
)
//这里要在添加前清空，不然会添加无数个节点
$('.carousel-inner').empty().append(bannerHtmlString)
)
web前端设计必备网页特效案例-轮播图(代码片段)
...分析CSS修饰功能需求原生JS实现JS代码拓展知识插件实现Bootstrap里面JS 插件第一步：引入插件和css，js文件第二步：在bootstrap网站的JavaScript插件里面找到轮播图，然后复制代码到自己的body里面,在做修改。根据自己... 查看详情
前端bootstrap案例：网格系统鼠标悬浮动画显示响应式布局(代码片段)
bootstrap框架系列案例案例网址【前端】Bootstrap案例：导航栏https://blog.csdn.net/karshey/article/details/127372691【前端】Bootstrap案例：轮播图https://blog.csdn.net/karshey/article/details/127388528【前端】Bootstrap案例 查看详情
前端小白案例-商品轮播图制作(代码片段)
知识点：html加CSS布局、html加css布局思维，定位、浮动详解。html代码：<divclass="banner"><divclass="pic"><ulid="pic"><listyle="background-image:url(‘images/VIP_img1.jpg‘);left:0;"></li><listyle= 查看详情
bootstrap轮播图carousel插件(代码片段)
一、基本介绍见：https://www.runoob.com/bootstrap/bootstrap-carousel-plugin.html 二、例子：在PC端使用轮播图（高度固定，图片居中，容器铺满，使用背景图）<divid="carousel-example-generic"class="carouselslide"data-ride="carousel"><!- 查看详情
案例：网页轮播图(代码片段)
轮播图也称为焦点图，是网页中比较常见的网页特效。功能需求：1.鼠标经过轮播图模块，左右按钮显示，鼠标离开则隐藏左右按钮。2.点击右侧按钮一次，图片往左播放一张，以此类推，左侧按钮同理。3.图片播放的同时，下面... 查看详情
轮播图案例(代码片段)
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>轮播图4</title><style>*margin:0;padding:0;list-style:none;.boxoverflow:hidden;position:relative 查看详情
javascript详解数据驱动显示之轮播图案例——三-----手撕轮播图(代码片段)
javaScript详解数据驱动显示之轮播图案例三<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE= 查看详情
web前端：bootstrap最强总结附详细代码（带常用案例！）(代码片段)
...ff1a;Web前端：JQuery最强总结附上详细代码Web前端：Bootstrap最强总结附详细代码Web前端：Bootstrap最强总结Bootstrap基础Bootstrap包的内容下载文件结构入门及使用BootstrapCSS部分按钮按钮实例表格实例表单垂直或基本表单内联... 查看详情
轮播图
...练地使用前端框架来实现需求而原生是基础，亦需要重视bootstrap轮播图-Carousel.js使用bootstrap的轮播图需要引入其css和js，bootstrap所有js插件都依赖jquerey，所以jquery需要在bootstrap·.js前引入bootstrap插件可单独引入也可用bootstrap.min.js... 查看详情
纯前端实现—jq轮播图（轮播图完全版）(代码片段)
实现效果：前面有篇文讲解过鼠标轮播图——https://gu-han-zhe.blog.csdn.net/article/details/121315021，还得鼠标点，有点麻烦，所以这篇给B格提升些！实现JQ轮播图（完全版~）！JQ轮播图源码：<!DOCTYPEht 查看详情
bootstrap之carousel轮播图自定义分页器(代码片段)
最近要开发一个轮播图的看板页面，试用下bootstrap的轮播图组件，因为分页器的部分需要自定义（文字过长需要放到轮播图区域的外面），使用 Listgroup组件作为轮播图的分页器放在左边。 <!DOCTYPEhtml><htmllang="en">&... 查看详情
纯前端实现—初级轮播图(代码片段)
实现效果：初级轮播图源码：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>初级轮播图</title><style>divwidth:300px;height:3 查看详情
python测试开发django-191.bootstrap3轮播图（carousel）(代码片段)
前言Bootstrap3实现轮播图滚动显示轮播图（Carousel）只需替换成自己本地图片/static/a1.png即可实现轮播图<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><!--引入css--&g... 查看详情
纯前端实现—鼠标轮播图(代码片段)
实现效果：前面有篇文讲解过手动轮播图——https://gu-han-zhe.blog.csdn.net/article/details/121314887，还得鼠标点，有点麻烦，所以这篇给B格提升些！实现鼠标轮播图！鼠标轮播图1源码：<!DOCTYPEhtml><htmllan... 查看详情
纯前端实现—手动轮播图(代码片段)
实现效果：前面有篇文讲解过初级轮播图——https://gu-han-zhe.blog.csdn.net/article/details/121309051，效果有点低级，所以这篇给B格提升些！共有两种轮播图方式进行选择：第一种：可左右切换图片，但是左右... 查看详情
web前端练习23----js中延时执行函数setinterval()和settimeout()案例：倒计时，大小动画平移动画，轮播图(代码片段)
文档：https://developer.mozilla.org/zh-CN/docs/Web/API/Window/setIntervalhttps://developer.mozilla.org/zh-CN/docs/Web/API/Window/setTimeoutsetInterval();定时执行函数 setInterval 无限次的执行，要通过 clearInterval() 停止基本语法每1秒执行一次，无限... 查看详情
前端必备技能——轮播图（原生代码+插件）(代码片段)
...否在为页面特效过于简单而苦恼？你是否也在为同是前端小白而别人的页面却比自己的更加精美？如果你看到这篇博客，你就已经赢在起跑线啦~因为！！！这篇博客将教会大家如何让页面展现出你的独特... 查看详情
纯前端实现—jq轮播图（轮播图完全版）(代码片段)
实现效果：前面有篇文讲解过鼠标轮播图——https://gu-han-zhe.blog.csdn.net/article/details/121315021，还得鼠标点，有点麻烦，所以这篇给B格提升些！实现JQ轮播图（完全版~）！JQ轮播图源码：<!DOCTYPEht... 查看详情