Bootstrap 轮播图设置

最新推荐文章于 2023-09-15 14:23:26 发布

原创最新推荐文章于 2023-09-15 14:23:26 发布 · 663 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap #css #javascript #jquery #jsp

Bootstrap 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍如何使用Bootstrap创建轮播图，包括设置轮播图的指标、图片容器及导航按钮，实现图片自动切换效果。文章适用于前端开发者，特别是初学者。

Bootstrap 轮播图设置

轮播图

<body style="background: #eee">

<div>
   <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="5000">
       
       <ol class="carousel-indicators">
       <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" role="listbox">
           <div class="item active">
               <img src="${contextPath}/system/img/ZGMY01.png" alt="ZGMY01.png"/>
               
               
           </div>
           <div class="item">
               <img src="${contextPath}/system/img/ZGMY02.png" alt="ZGMY02.png"/>
               
               
           </div>
           <div class="item">
               <img src="${contextPath}/system/img/ZGMY03.png" alt="ZGMY03.png"/>
               
               
           </div>
           
           <a class="carousel-control-prev" href="#carousel-example-generic" data-slide="prev">
           <span class="carousel-control-prev-icon"></span>
           </a>
           <a class="carousel-control-next" href="#carousel-example-generic" data-slide="next">
           <span class="carousel-control-next-icon"></span>
           </a>
       </div>
   </div>
</div>

</body>