使用BootStrap进行轮播图的制作
Bootstrap轮播（Carousel）插件是一种灵活的响应式的向站点添加滑块的方式。除此之外，内容也是足够灵活的，可以是图像、内嵌框架、视频或者其他您想要放置的任何类型的内容。
<!DOCTYPEhtml>
<htmllang="zh-cn">
<head>
<metacharset="utf-8">
<metahttp-equiv="X-UA-Compatible"content="IE=edge">
<metaname="viewport"content="width=device-width,initial-scale=1">
<title>轮播图</title>
<linkhref="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"rel="stylesheet"/>
</head>
<style>
.carousel{
height:500px;
}
.carousel.item{
height:500px;
}
.carousel.itemimg{
width:100%;
}
</style>
<body>
<divid="carousel-example-generic"class="carouselslide"data-ride="carousel">
<!--Indicators轮播指标-->
<olclass="carousel-indicators">
<lidata-target="#carousel-example-generic"data-slide-to="0"class="active"></li>
<lidata-target="#carousel-example-generic"data-slide-to="1"></li>
<lidata-target="#carousel-example-generic"data-slide-to="2"></li>
</ol>
<!--Wrapperforslides轮播项目-->
<divclass="carousel-inner"role="listbox">
<divclass="itemactive">
<imgsrc="http://img.mukewang.com/5412ad400001e52014280484.jpg"alt="...">
<divclass="carousel-caption">
11英寸MacBookAir充电一次可运行长达9小时，而13英寸机型则可运行长达12小时。
</div>
</div>
<divclass="item">
<imgsrc="http://img.mukewang.com/5412ad7c0001d2eb10880541.jpg"alt="...">
<divclass="carousel-caption">
无论是什么任务，配备IntelHDGraphics5000图形处理器的第四代IntelCore处理器都能应对自如。
</div>
</div>
<divclass="item">
<imgsrc="http://img.mukewang.com/5412ae5c0001653b12800644.jpg"alt="...">
<divclass="carousel-caption">
有了新一代802.11ac技术，MacBookAir令Wi-Fi速度超越极限。
</div>
</div>
</div>
<!--Controls-->
<aclass="leftcarousel-control"href="#carousel-example-generic"role="button"data-slide="prev">
<spanclass="glyphiconglyphicon-chevron-left"></span>
<spanclass="sr-only">Previous</span>
</a>
<aclass="rightcarousel-control"href="#carousel-example-generic"role="button"data-slide="next">
<spanclass="glyphiconglyphicon-chevron-right"></span>
<spanclass="sr-only">Next</span>
</a>
</div>
<scriptsrc="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>
以上所述是小编给大家介绍的使用BootStrap进行轮播图的制作，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！