前端网站练习COFFEE_blog_3 轮播图

这一部分是咖啡网站的第二部分，用到了：

• 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设置间隔时长；

轮播图这里布局调整起来不是很费劲，所以到这里就结束这一部分了，下一部分是咖啡机的介绍部分；