专栏首页十月梦想bootstrap轮播图实现

bootstrap轮播图实现

bootstrap可以实现多种轮播样式

1.先来看一下完整的轮播(自动轮播,左右翻页,小圆点切换)

<!DOCTYPE html>
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
<style>
  div.item img{
    width:100%;
   }
  div#carousel-example-generic{
    width:80%;
    margin:0 auto;
  }
</style>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="1000">
  <!-- Indicators -->
  <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>
    <li data-target="#carousel-example-generic" data-slide-to="3"></li>
  </ol>
 
  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="http://how2j.cn/img/site/step/3491.png" >
    </div>
    <div class="item">
            <img src="http://how2j.cn/img/site/step/3492.png" >
    </div>
    <div class="item">
            <img src="http://how2j.cn/img/site/step/3493.png" >
    </div>
 
    <div class="item">
            <img src="http://how2j.cn/img/site/step/3494.png" >
    </div>
 
  </div>
 
  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
 
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
 
  </a>
 
</div>

2.轮播速度设置在整个轮播设置data-interval=“1000”设置轮播速度,1000=1m,单位是毫秒

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="1000">

轮播自动播放速度设为1s轮播一次

3.左右翻页的控制

 <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
 
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
 
  </a>

  去掉这两个超链接则没有左右翻页功能

4.轮播标题内容(banner图里面的文本标题等)

<div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="http://how2j.cn/img/site/step/3491.png" >
      <div class="carousel-caption">
        轮播标题
      </div>
    </div>
    <div class="item">
            <img src="http://how2j.cn/img/site/step/3492.png" >
             <div class="carousel-caption">
        轮播标题
      </div>
    </div>
    <div class="item">
            <img src="http://how2j.cn/img/site/step/3493.png" >
             <div class="carousel-caption">
        轮播标题
      </div>
    </div>
 
    <div class="item">
            <img src="http://how2j.cn/img/site/step/3494.png" >
             <div class="carousel-caption">
        轮播标题
      </div>
    </div>
 
  </div>

在轮播的item的子项中新增class为carousel-caption则会出现在banner图内的文本(注:这个类放在轮播图的下面)

5.基础轮播实现

<!DOCTYPE html>
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
<style>
  div.item img{
    width:100%;
   }
  div#carousel-example-generic{
    width:80%;
    margin:0 auto;
  }
</style>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <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>
    <li data-target="#carousel-example-generic" data-slide-to="3"></li>
  </ol>
 
  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="http://how2j.cn/img/site/step/3491.png" >
    </div>
    <div class="item">
            <img src="http://how2j.cn/img/site/step/3492.png" >
    </div>
    <div class="item">
            <img src="http://how2j.cn/img/site/step/3493.png" >
    </div>
 
    <div class="item">
            <img src="http://how2j.cn/img/site/step/3494.png" >
    </div>
 
  </div>
</div>

可以根据所需要的轮播样式自动去添加!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • bootstrap之图片的响应式

    前面提到了内容段落的响应式采用栅格系统进行不同设备的响应式,下面简单进行图片的样式和响应式介绍.

    十月梦想
  • 一天带入门到放弃vue.js(三)

    自己新建的标签赋予特殊功能的是组件,而指定是在标签上使用类似于属性,以v-name开头,v-on,v-if...是系统指令! v-是表示这是vue的指令if,f...

    十月梦想
  • ES6数组复制

    前面我们了解了...中可以获取未指定的函数,name这里在数组中也可以进行数组的复制

    十月梦想
  • 彻底搞懂epoll高效运行的原理

    这篇文章读不懂的没关系,可以先收藏一下。笔者准备介绍完epoll和NIO等知识点,然后写一篇Java网络IO模型的介绍,这样可以使Java网络IO的知识体系更加...

    全菜工程师小辉
  • CRM和C4C里的组织架构 - Organizational Structure

    /SAP_BYD_APPLICATION_UI/mom/org/COD_OrgUnit_OWL.OWL.uicomponent

    Jerry Wang
  • 透过 Top 500 美拍短视频看 AV1 性能

    AV1 以其出色的压缩性能,无疑是自 2017 年以来备受关注的新生代视频编码标准。业界也相继对 AV1 进行了一些评测工作,如 Facebook、Netfli...

    LiveVideoStack
  • 2020年9月TIOBE指数发布,Java流行度降低,C++ 突起

    自从今年5月被C语言超越后,Java就一直位列第2,久久无法突破,市场份额也在逐月降低,本月的市场占比相较去年,降幅甚至高达-3.18%。

    APICloud
  • 如何通过Binlog来实现不同系统间数据同步

    互联网时代除了业务迭代速度快,还有就是数据增速也比较快。单应用、单实例、单数据库的时代早已不复返。现在,作为技术研发,如果参与的项目没有用到分库分表,都不好意说...

    用户7676729
  • 太强了,竟然可以根据指纹图像预测性别!

    在进入神经网络世界之前,让我们先谈一谈指纹?众所周知,没有两个人具有相同的指纹,但是我们可以建立一个CNN模型来从指纹图像中预测性别吗?让我们看看……

    小白学视觉
  • Spring学习之浅析refresh()执行逻辑

    对于AbstractApplicationContex#refresh()方法逻辑,可所谓是贯通spring框架核心逻辑,溪源在debug过程中,理解起来...

    沁溪源

扫码关注云+社区

领取腾讯云代金券