您的位置：首页 > Web前端 > BootStrap

bootstrap 实现轮播图

2017-11-07 23:02 113 查看 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Carousel</title>
<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>
<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>
</ol>
<!-- 轮播图具体内容 -->
<div class="carousel-inner">
<div class="item active">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1510071051013&di=fe871132a698a7e62aa1036240aa221b&imgtype=jpg&src=http%3A%2F%2Fimg.evolife.cn%2F2015-01%2Fbde62420fc3165f8_thumb.jpg" style="height: 300px; width:600px">
<!-- 图上文字 -->
<div class="carousel-caption">
<h4>Red Car Fly</h4>
<p>ajsuten hsdfupeia jsdtfua</p>
</div>
</div>
<div class="item">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1510077934469&di=d7d222fb5b5465fde75425e984cf2b90&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F7a899e510fb30f2478787ac5c295d143ac4b0311.jpg" style="height: 300px; width:600px">
<!-- 图上文字 -->
<div class="carousel-caption">
<h4>White Car Fly</h4>
<p>ajsuten hsdfupeia jsdtfua</p>
</div>
</div>
<div class="item">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1510077977327&di=404f5cf97186c344d0a34a343f8be5b2&imgtype=0&src=http%3A%2F%2Fimg.autofan.com.cn%2F2016-12-05%2F16%2Ff206c101380a.JPG" style="height: 300px; width:600px">
<!-- 图上文字 -->
<div class="carousel-caption">
<h4>Blue Car Fly</h4>
<p>ajsuten hsdfupeia jsdtfua</p>
</div>
</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>

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                bootstrap
                                                轮播图
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航