这一部分是咖啡网站的第二部分,用到了:
- Bootstrap4框架;
- javascript调整图片轮播的时长;
- css3设置在浏览器窗口大小不同的情况下的图片尺寸;
html代码:
<!-- 轮播图 -->
<div id="carousel" class="carousel slide" data-ride="carousel">
<!-- 轮播指标-->
<ul class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<li data-target="#carousel" data-slide-to="1"></li>
<li data-target="#carousel" data-slide-to="2"></li>
</ul>
<!-- 轮播项目-->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="./images/coffee1.jpg">
<div class="carousel-caption">
<h1>IDEA & DREAM</h1>
</div>
</div>
<div class="carousel-item">
<img src="./images/coffee2.jpg">
<div class="carousel-caption">
<h1>IDEA & DREAM</h1>
</div>
</div>
<div class="carousel-item">
<img src="./images/coffee3.jpg">
<div class="carousel-caption">
<h1>IDEA & DREAM</h1>
</div>
</div>
<a class="carousel-control-prev" href="#carousel" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#carousel" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
class名说明:
- .carousel :创建一个轮播项目;
- .slide:切换图片的过渡效果,如果不需要效果的话可以不要,并不是必须的;
- .carousel-indicators:添加指示符,可以更清楚的知道轮到了第几张图片;
- .carousel-inner:这个类一般放在一个div中,用这个div来存放要用来轮播的图片的div;
- .carousel-item:设置了这个类的div用来存放和指定每个图片的内容;
- .carousel-caption:用来添加图片上的描述内容,在.carousel-item内添加,是.carousel-item的下一级;
/* carousel */
#carousel{
margin-top: 0px;
padding: 0;
}
#carousel .carousel-inner img {
width: 100%;
height: 100%;
}
#carousel .carousel-item{
height: 570px;
}
#carousel .carousel-item img{
width: 100%;
height: 100%;
}
#carousel .carousel-caption h1{
font-size: 60px;
color: green;
font-weight: bold;
margin-bottom: 50px;
}
/* 当浏览器窗口大小在650px到850px之间时,图片描述文字执行这里的样式 */
@media screen and (min-width: 650px) and (max-width: 850px){
#carousel .carousel-caption h1{
font-size: 42px;
margin-bottom: 20px;
}
}
/* 当浏览器窗口大小在641px时执行这里的样式 */
@media only screen and (max-width: 641px){
/* carousel */
#carousel .carousel-item{
height: 200px;
}
#carousel .carousel-caption h1{
font-size: 20px;
margin-bottom: 0px;
}
#carousel .carousel-indicators{
bottom: 0px;
}
}
JavaScript代码:
//轮播图
//设置轮播间隔为3秒
$("#carousel").carousel({
interval:3000
});
JavaScript代码说明:
- 轮播可通过JS手动调用$("#carousel").carousel();
- 使用interval设置间隔时长;
轮播图这里布局调整起来不是很费劲,所以到这里就结束这一部分了,下一部分是咖啡机的介绍部分;