当前位置:首页 >> 网络编程

在bootstrap中实现轮播图实例代码

Bootstrap中轮播图插件叫作Carousel

以下容器就是整个轮播图组件的整体,

注意该盒子必须加上 class=”carousel slide” data-ride=”carousel” 表示当 前是一个轮播图

bootstrap.js会自动为当前元素添加图片轮播的特效

<div id="轮播图的ID" class="carousel slide" data-ride="carousel"> 
 <!-- ol标签是图片轮播的控制点 -->
 <ol class="carousel-indicators">
  <!-- 
   每一个li就是一个单独的控制点
    data-target属性就是指定当前控制点控制的是哪一个轮播图,其目的是如果界面上有多个轮播图,便于区分到底控制哪一个
    data-slide-to属性是指当前的li元素绑定的是第几个轮播项
   注意,默认必须给其中某个li加上active,展示的时候就是焦点项目
  -->
   <li data-target="#轮播图的ID" data-slide-to="0" class="active"></li>
   <li data-target="#轮播图的ID" data-slide-to="1"></li>
  <!-- ...更多的 -->
</ol>
 <!-- 
  .carousel-inner是所有轮播项的容器盒子,
  注意role="listbox"代表当前div是一个列表盒子,作用就是给当前div添加  一个语义
 -->
 <div class="carousel-inner" role="listbox">
  <!-- 每一个.item就是单个轮播项目,注意默认要给第一个轮播项目加上active,表示为焦点 -->
  <div class="item active">
   <!-- 轮播项目中展示的图片 -->
   <img src="/UploadFiles/2021-04-02/example.jpg">

以上所述是小编给大家介绍的在bootstrop中实现轮播图的实例代码,希望对大家有所帮助!