bootstrap 2-滚动广告Carousel

最新推荐文章于 2023-07-24 22:28:56 发布

sanluo11

最新推荐文章于 2023-07-24 22:28:56 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/sanluo11/article/details/54729643

Bootstrap Carousel组件常用于创建滚动广告，展示轮播图片或内容。基础结构包括滑块和指示器，可配置自动播放和过渡效果。

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

Carousel是一个用于轮播内容的组件，也就是我们经常用的滚动广告，或者滚动图片。

一个Carousel的基本结构：

代码模板：

<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>
 </ol>
 <!--轮播组件的内容-->
 <div class="carousel-inner" role="listbox">
	<div class="item active">
		<img src="" alt=""><div class="carousel-caption"></div>
	</div>
	<div>
		<img src="" alt=""><div class="carousel-caption"></div>
	</div>
 </div>
 <!--轮播组件的向左向右按钮-->
 <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
	<span class="glyphicon glyphicon-chevron-left"></span>
	<span class="src-only">Previous</span>
 </a>
 <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
	<span class="glyphicon glyphicon-chevron-right"></span>
	<span class="src-only">Next</span>
 </a>
</div>

实例如下

<html>
  <head>
	 <style type="text/css">
	  	body{
	  		padding-top:50px
	  	}
	  	.carousel{
	  		height:500px;
	  		background-color:#fff;
	  	}
	  	.carousel .item{
	  		height:300px;
	  		background-color:#fff;
	  	}
	  	.carousel img{
	  		width:100%;
	  	}
	  	.carousel-caption p{
	  		margin-bottom:20px;
	  		font-size:20px;
	  		line-height:1.8;
	  	}
	  </style>
	  
	<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"></link>
    <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
  </head>
<body>
	<nav class="navbar navbar-default navbar-fixed-top navbar-inverse" role="navigation">
		<div class="container">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar—collapse-1">
					<span class="sr-only">Toggle navigation</span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
			 <a class="navbar-brand" href="#">现代浏览器博物馆</a>
		   </div>
		<div class="collapse navbar-collapse" id="bs-example-navbar—collapse-1">
			<ul class="nav navbar-nav">
			  <li class="active"><a href="#">综述</a></li>
			  <li><a href="#">简述</a></li>
			  <li class="dropdown">
			  	<a href="#" class="dropdown-toggle" data-toggle="dropdown">特点
			  		<span class="caret"></span>
			  	</a>
			  	<ul class="dropdown-menu" role="menu">
			  		<li><a href="#">Chrome</a></li>
			  		<li><a href="#">Firefox</a></li>
			  		<li><a href="#">Opera</a></li>
			  		<li class="divider"></li>
			  		<li><a href="#">Safari</a></li>
			  		<li><a href="#">IE</a></li>
			  	</ul>
			  </li>
			</ul>
		</div>
	</div>
  </nav>
  
  <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
	<!--代表的是5个点的导航-->
	 <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>
	  <li data-target="#carousel-example-generic" data-slide-to="4"></li>
	 </ol>
 	<!--轮播组件的内容-->
	 <div class="carousel-inner" role="listbox">
		<div class="item active">
			<img src="img/Chrysanthemum.jpg"></img>
			<div class="carousel-caption">
				<h1>Chrome</h1>
				<p>Google Chrome,又称Google浏览器，是一个由Google（谷歌）公司开发的网页浏览器。</p>
				
			</div>
		</div>
		<div class="item">
			<img src="img/Hydrangeas.jpg"></img>
			<div class="carousel-caption">
				<h1>Firefox</h1>
				<p>Google Chrome,又称Google浏览器，是一个由Google（谷歌）公司开发的网页浏览器。</p>
			</div>
		</div>
		<div class="item">
			<img src="img/Lighthouse.jpg"></img>
			<div class="carousel-caption">
				<h1>Opera</h1>
				<p>Google Chrome,又称Google浏览器，是一个由Google（谷歌）公司开发的网页浏览器。</p>
			</div>
		</div>
		<div class="item">
			<img src="img/Tulips.jpg"></img>
			<div class="carousel-caption">
				<h1>Safari</h1>
				<p>Google Chrome,又称Google浏览器，是一个由Google（谷歌）公司开发的网页浏览器。</p>
			</div>
		</div>
		<div class="item">
			<img src="img/Penguins.jpg"></img>
			<div class="carousel-caption">
				<h1>IE</h1>
				<p>Google Chrome,又称Google浏览器，是一个由Google（谷歌）公司开发的网页浏览器。</p>
			</div>
		</div>
	 </div>
 	<!--轮播组件的向左向右按钮-->
	 <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
		<span class="glyphicon glyphicon-chevron-left"></span>
		<span class="src-only"></span>
	 </a>
	 <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
		<span class="glyphicon glyphicon-chevron-right"></span>
		<span class="src-only"></span>
	 </a>
  </div>
</body>
</html>

效果图如下