Bootstrap4 轮播
轮播是一个循环的幻灯片,创建了一个简单的图片轮播效果 :
注意:使用Bootstrap4时,<script>
标签放到页面底部的 </body>
标签之前。注意顺序,jQuery 必须放在最前面,然后是 Popper.js,最后是我们自己的 JavaScript 插件。
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<style>
img {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- 指示符 -->
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<!-- 轮播图片 -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="http://static.runoob.com/images/mix/img_fjords_wide.jpg">
</div>
<div class="carousel-item">
<img src="http://static.runoob.com/images/mix/img_nature_wide.jpg">
</div>
<div class="carousel-item">
<img src="http://static.runoob.com/images/mix/img_mountains_wide.jpg">
</div>
</div>
<!-- 左右切换按钮 -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
创建响应式轮播
html代码:<div id="demo" class="carousel slide" data-ride="carousel">
<!-- 指示符 -->
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
<li data-target="#demo" data-slide-to="3"></li>
</ul>
<!-- 轮播图片 -->
<div class="carousel-inner">
<div class="carousel-item active carousel-bg1">
<img src="./img/slide_01_640x340.jpg" style="width: 100%;">
</div>
<div class="carousel-item carousel-bg2">
<img src="./img/slide_02_640x340.jpg" style="width: 100%;">
</div>
<div class="carousel-item carousel-bg3">
<img src="./img/slide_03_640x340.jpg" style="width: 100%;">
</div>
<div class="carousel-item carousel-bg4">
<img src="./img/slide_04_640x340.jpg" style="width: 100%;">
</div>
</div>
<!-- 左右切换按钮 -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
<!-- 轮播图结束 -->
css代码:
/* 轮播图 */
@media screen and (max-width: 640px) {
#demo div.carousel-item img {
display: block;
}
}
@media screen and (min-width:640px) {
#demo div.carousel-item img {
display:none;
}
#demo div.carousel-bg1 {
height: 410px;
width: 100%;
background: url("../img/slide_01_2000x410.jpg") no-repeat center center;
}
#demo .carousel-bg2 {
height: 410px;
width: 100%;
background: url("../img/slide_02_2000x410.jpg") no-repeat center center;
}
#demo .carousel-bg3 {
height: 410px;
width: 100%;
background: url("../img/slide_03_2000x410.jpg") no-repeat center center;
}
#demo .carousel-bg4 {
height: 410px;
width: 100%;
background: url("../img/slide_04_2000x410.jpg") no-repeat center center;
}
}
注意:将大图设置为背景图可以使用居中对齐使图片看上去更整洁明了,利用媒体属性可以时网站适应屏幕显示大小,将小图设置为img标签里,只要使用display:none;便可以使其隐藏。