用Bootstrap框架写响应式轮播图

我会带着你远行 2022-05-25 10:37 210阅读 0赞

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

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

![70][]

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

![70 1][]

结尾记得加上这两行：

![70 2][]

<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>

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

![70 3][]

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

[70]: /images/20220525/2d56516773b445158914eff40228b15f.png
[70 1]: /images/20220525/f0433154a88b46c285943a6440028db6.png
[70 2]: /images/20220525/2d7403f1fa6c4f509efd4db5ca1a9d69.png
[70 3]: /images/20220525/c17e03dafe734bc8bd2a3427b98c34b0.png