多张图片轮播

风筱默染

已于 2022-05-18 13:47:33 修改

阅读量232

点赞数

分类专栏： JavaScript 文章标签： bootstrap html css

于 2022-05-12 17:17:10 首次发布

本文链接：https://blog.csdn.net/m0_51700376/article/details/124735674

版权

JavaScript 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 轮播（Carousel）插件的标题</title>
	<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<style type="text/css">
	*{
		margin: 0 auto;
		background-color: #00aaff;
	}
	.item,.carousel-caption{
		width: 900px;
		height: 450px;
	}
	.carousel-caption{
		left: 0;
		top: 0;
		padding: 0;
	}
	img{
		width: 300px;
		height: 225px;
	}
</style>
</head>
<body>
 
<div id="myCarousel" class="carousel slide">
	<div class="carousel-inner" style="font-size: 0;">
		
		<div class="item active">
			<div class="carousel-caption">
				<img style="display: inline-block;" src="images/1.jpg" >
				<img style="display: inline-block;" src="images/1.jpg" >
				<img style="display: inline-block;" src="images/1.jpg" >
				<img style="display: inline-block;" src="images/1.jpg" >
				<img style="display: inline-block;" src="images/1.jpg" >
				<img style="display: inline-block;" src="images/1.jpg" >
			</div>
		</div>
		
		<div class="item">
			<div class="carousel-caption">
				<img style="display: inline-block;" src="images/2.jpg" >
				<img style="display: inline-block;" src="images/2.jpg" >
				<img style="display: inline-block;" src="images/2.jpg" >
				<img style="display: inline-block;" src="images/2.jpg" >
				<img style="display: inline-block;" src="images/2.jpg" >
				<img style="display: inline-block;" src="images/2.jpg" >
			</div>
		</div>
		
		<div class="item">
			<div class="carousel-caption">
				<img style="display: inline-block;" src="images/3.jpg" >
				<img style="display: inline-block;" src="images/3.jpg" >
				<img style="display: inline-block;" src="images/3.jpg" >
				<img style="display: inline-block;" src="images/3.jpg" >
				<img style="display: inline-block;" src="images/3.jpg" >
				<img style="display: inline-block;" src="images/3.jpg" >
			</div>
			
		</div>
	</div>
	<!-- 轮播（Carousel）导航 -->
	<a class="carousel-control" href="#myCarousel"  style="left:550px;width: 80px;" role="button" data-slide="prev">
	    <span class="glyphicon glyphicon-chevron-left" aria-hidden="false"></span>
	</a>

	<a class=" carousel-control" href="#myCarousel" style="left: 1500px;width: 80px;" role="button" data-slide="next">
	    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
	</a>
</div> 
 
<script type="text/javascript">
	$(document).ready(function(){
    $('#myCarousel').carousel()
   })
</script>
</body>
</html>

风筱默染

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
多张图片轮播

```html<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Bootstrap 实例 - 轮播（Carousel）插件的标题</title> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"> <s..
复制链接

扫一扫