Swiper轮播图 

 <link href="./css/swiper.min.css" rel="stylesheet">
  <script src="./js/swiper.min.js"></script>
  <style>
	.swiper-container{
	  width: 100%;
	  height: 700px;
	}
	.swiper-slide{
	  width: 100%;
	  height: 700px;
	}
	.swiper-slide img{
	  width: 100%;
	  height: 100%;
	}
  </style>
</head>
<body>
<!--        中部主体-->
<div id="main">
  <!--主体轮播图-->
  <div class="swiper-container">
	<div class="swiper-wrapper">
	  <div class="swiper-slide"><img src="./images/homebg1.png" alt=""/></div>
	  <div class="swiper-slide"><img src="./images/homebg2.png" alt=""/></div>
	  <div class="swiper-slide"><img src="./images/homebg3.png" alt=""/></div>
	  <div class="swiper-slide"><img src="./images/homebg4.png" alt=""/></div>
	  <div class="swiper-slide"><img src="./images/homebg5.png" alt=""/></div>
	</div>
	<!-- 如果需要分页器 -->
	<div class="swiper-pagination"></div>
	<!-- 如果需要导航按钮 -->
	<div class="swiper-button-prev"></div>
	<div class="swiper-button-next"></div>
	<!-- 如果需要滚动条 -->
	<div class="swiper-scrollbar"></div>
  </div>
  <script src="./js/swiper01.js"></script>
posted @ 2021-04-27 19:48  迷彩程序猿  阅读(28)  评论(0)    收藏  举报