Bootstrap 轮播图技巧_bootstrap3 轮播图-CSDN博客

本文链接：https://blog.csdn.net/honghaiash/article/details/100942972

本文介绍了在Bootstrap3中实现轮播图的四种方法，包括使用`<img>`标签、设置div背景、根据图片名称拼接地址以及利用data-image属性。强调了方法4的灵活性和响应式设计，通过JS动态设置背景图片，实现不同屏幕宽度下的图片适配。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

bootstrap的使用让页面开发的速度变得更快,在这里就着重解析一下bootstrap3里轮播图模块,和不同情况（屏幕宽度）下轮播图图片大小如何做到响应式切换.

下面代码即是bootstrap3轮播图模块解析:

<section id="banner">

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

<ol class="carousel-indicators">


<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
</ol>

<div class="carousel-inner" role="listbox">


<div class="item active" >






</div>
<div class="item" >
</div>
<div class="item" >
</div>
<div class="item" >
</div>
</div>



<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</section>

轮播图的图片需要添加到<div class="item">中去

那么添加图片的方式有几种呢?

这里提供几种可行的图片添加方式:

方法1:最简单的办法

div中添加 <img> 标签来实现

<div class="item">
<img src="./img/slide_02_2000x410.jpg" alt="...">
<div class="carousel-caption">
</div>
</div>

缺点:

这种方法需要设置较为复杂的CSS样式来让图片超过屏幕宽度时让图片居中显示并overflow:hidden

方法2:设置div的背景来实现

css代码:

            background: url('图片.jpg') center center no-repeat;

并设置background-size:cover 根据短的边填满图片

优点是设置比较简单,缺点也很明显,需要给每一个div添加图片地址,后续修改也比较麻烦.

图片是获取的内容,在网页设计中也不应该由css来获取,应该通过逻辑来获取图片的地址

方法3：当你的图片名有严格的名称如

slide_00_2000x410.jpg

slide_01_2000x410.jpg

slide_02_2000x410.jpg

slide_03_2000x410.jpg

slide_00_640x360.jpg

slide_01_640x360.jpg

slide_02_640x360.jpg

slide_03_640x360.jpg

这种条件下可以通过JS拼接 <div class= "item">的 background-image地址来实现

JS代码如下:

$(function () {
var itemArr = $(' .item');
console.log(itemArr);
// 根据不同的item，设置不同的图片
itemArr.each(function (index,item) {
//通过index，来构建图片的url
var imgURL = './img/slide_0'+index +'_2000x410.jpg';
//设置背景图片的URL地址
item.style.backgroundImage = "url('" + imgURL +"')";
})
});

但是方法3 的局限性太大了,随便点开一个门户网站查看它的轮播图图片地址都时一堆"乱码"

方法4:使用来data-image 来巧妙的获取来图片的路径,从而避开了对图片地址的依赖

首先需要设置div:

<div class="item" data-image="./img/slide_02_2000x410.jpg">

<div class="carousel-caption">
</div>
</div>

JS代码:

$(function () {
//轮播图片的设置
var itemArr = $('.item');
itemArr.each(function (index, item) {
//获取data-image里面的数据
var imageURL = item.dataset.image;
item.style.backgroundImage = "url('" + imageURL +"')";
});
});

这样就可以方便的通过修改data-image的值来更换页面,整体的代码也更加干练.

--------------------------------------------------------------------------------------------------------------------

响应式页面的轮播图的图片也应该是响应式的,大屏幕轮播图用大图,小平面轮播图用小图,下面的代码可以通过方法4实现轮播图的响应式

div设置:

<div class="item" data-large-image="./img/slide_03_2000x410.jpg" data-small-image="./img/slide_03_640x340.jpg">

<div class="carousel-caption">
</div>
</div>

JS代码: