轮播图作业

怎么硕呐

于 2022-04-07 08:37:33 发布

阅读量130

点赞数

文章标签： bootstrap

本文链接：https://blog.csdn.net/weixin_58710813/article/details/124004767

版权

这是一个关于音乐网站前端设计的示例。页面包含一个导航栏，提供首页、发现音乐、个性推荐和我的音乐等选项。主体部分是一个轮播图，展示了多张音乐主题的图片，支持自动轮播和手动切换。使用了Bootstrap框架进行样式布局，并对轮播图的样式进行了定制，如容器大小、圆圈链接位置和图片位置等。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<title>music</title>
    <link href="css/bootstrap.min.css" rel="stylesheet"> 
     <link href="css/index.css" rel="stylesheet">
	<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<style>
		/*调整容器大小*/
		#myCarousel {
			width: 600px;
		}
		/*调整圆圈链接ol位置*/
		.carousel-indicators {
			bottom: -5px;
		}
		/*调整轮播图位置*/
		#carousel-example-generic {
			top: 100px;
		}
	</style>
</head>
<body>
    <nav class="navbar navbar-inverse">
        <div class="container">
          <!-- Brand and toggle get grouped for better mobile display -->
          <div class="navbar-header">
            <a class="font" href="#"><i>music</i></a>
          </div>
      
          <!-- Collect the nav links, forms, and other content for toggling -->
          <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
              <li class="active"><a href="#">首页 <span class="sr-only">(current)</span></a></li>
              <li><a href="#">发现音乐</a></li>
              <li><a href="#">个性推荐</a></li>
              <li><a href="#">我的音乐</a></li>
              
            </ul>
            <form class="navbar-form navbar-right">
              <div class="input-group">
                <input type="text" class="form-control" placeholder="搜索">
                 <span class="input-group-btn"><button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button></span>
              </div>
             
            </form>
           
          </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
      </nav>

	<div class="container" id="myCarousel">
		<!-- 轮播图容器 -->
		<div id="carousel-example-generic" class="carousel slide">
			<!-- 轮播图上的圆圈链接 -->
			<ol class="carousel-indicators radiou">
				<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">
				<div class="item active">
					<img src="img/img.jpg">			
				</div>
				<div class="item">
					<img src="img/img1.jpg">
				</div>
				<div class="item">
					<img src="img/img2.jpg">
				</div>
                <div class="item">
					<img src="img/img3.jpg">
				</div>
                <div class="item">
					<img src="img/img4.jpg">
				</div>
			</div>
			<!-- 轮播图上的向前一图切换链接 -->
			<a href="#carousel-example-generic" data-slide="prev" class="left carousel-control">
				<span class="glyphicon glyphicon-chevron-left"></span>
			</a>
			<!-- 轮播图上的向后一图切换链接 -->
			<a href="#carousel-example-generic" data-slide="next" class="right carousel-control">
				<span class="glyphicon glyphicon-chevron-right"></span>
			</a>
		</div>
	</div>
	<!-- 引入jquery与bootstrap的js文件 -->
	<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
	<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<script>
		$(".carousel").carousel({
			interval:2000 //每隔两秒自动轮播
		})
	</script>
</body>
</html>