用Bootstrap框架写响应式轮播图

说实话个人觉得这个Bootstrap的js插件来实现轮播图效果挺好的。

提醒一下你得要到Bootstrap官网提前下载一下这个：

还有就是在你的开头记得加上这行代码：

结尾记得加上这两行：

<!-- 轮播图 -->

<div id="myCarousel" class="carousel slide" > 
		<div class="carousel-inner">
			<ol class="carousel-indicators">
				<li data-target="#myCarousel" data-slide-to ="0" class="active" ></li>
				<li data-target="#myCarousel" data-slide-to ="1"></li>
				<li data-target="#myCarousel" data-slide-to ="2"></li>
				<li data-target="#myCarousel" data-slide-to ="3"></li>
				<li data-target="#myCarousel" data-slide-to ="4"></li>
			</ol>


			<div class="item active">
				<a href="#">
					<img src="img/slide2.jpg" alt="第一张" width="100%">
				</a>
			</div>
			<div class="item">
				<a href="#">
					<img src="img/slide1.jpg" alt="第二张" width="100%">
				</a>
			</div>
			<div class="item">
				<a href="#">
					<img src="img/slide3.jpg" alt="第三张" width="100%">
				</a>
			</div>
			<div class="item">
				<a href="#">
					<img src="img/slide4.jpg" alt="第四张" width="100%">
				</a>
			</div>
			<div class="item">
				<a href="#">
					<img src="img/slide5.jpg" alt="第五张" width="100%">
				</a>
			</div>
		<a href="#myCarousel" data-slide="prev" class="carousel-control left"><!-- ‹ -->
			<span class="glyphicon glyphicon-chevron-left"></span>
		</a><!-- 左箭头 -->
		<a href="#myCarousel" data-slide="next" class="carousel-control right"><!-- › -->
			<span class="glyphicon glyphicon-chevron-right"></span>
		</a><!-- 右箭头 -->
	</div>

//还有一小部分js代码：

<script type="text/javascript">
	$(function(){
	//轮播图自动播放
	$('#myCarousel').carousel({
		interval: 3000,//自动播放4s

	});

});
</script>

 

话不多说直接上图看效果：

 

小伙伴觉得还不错的话可以收藏一下哦，嘿嘿。