說實話個人覺得這個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>
 

話不多說直接上圖看效果：

小夥伴覺得還不錯的話可以收藏一下哦，嘿嘿。