码迷,mamicode.com
首页 > 其他好文 > 详细

BootStrap:轮播插件

时间:2019-02-22 12:02:44      阅读:188      评论:0      收藏:0      [点我收藏+]

标签:src   phi   image   OLE   并且   stat   指定   计数器   --   

前述

利用 BootStrap 实现图片轮播,包括 基本轮播、带标题的轮播、设置轮播速度的轮播、控制前后的轮播

实例

基本轮播

代码

1.引入bootstrap和jQuery文件

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

2.首先要有一个整体的轮播容器

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

3.设置轮播指标

  • data-ride 属性:取值 carousel,并且将其定义在 carousel 上。

  • data-target 属性:取值 carousel 定义的 ID 名或者其他样式识别符,如下面的实例,取值为“#carousel-example-generic”,并且将其定义在轮播图计数器的每个 li 上。

  • data-slide-to 属性:用来传递某个帧的下标,比如 data-slide-to="2",可以直接跳转到这个指定的帧(下标从0开始计),同样定义在轮播图计数器的每个 li 上。

  • Carousel-indicators:圆圈部分样式,都是绝对定位,每个li设置为行内块元素,用text-indent:-999来隐藏字体

<!-- 轮播指标 -->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <!-- 轮播指标 -->
    <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>

4.设置轮播的幻灯片项目

  • Carousel-inner:旋转图片列表区域,其中每项有item来修饰
  • 其中的active、next、prev都认为是可见的
  • class="item active":利用active来设置对应显示的
    <!-- 轮播的幻灯片项目 -->
    <div class="carousel-inner" role="listbox">
        <div class="item active">
            <img src="http://pic1.win4000.com/wallpaper/2019-02-21/5c6e434e8d2fb.jpg" >
        </div>
        <div class="item">
            <img src="http://pic1.win4000.com/wallpaper/2019-02-11/5c6137ee00320.jpg" >
        </div>
        <div class="item">
            <img src="http://pic1.win4000.com/wallpaper/2019-01-27/5c4d7aa191adb.jpg" >
        </div>
    
        <div class="item">
            <img src="http://pic1.win4000.com/wallpaper/2019-01-27/5c4d7a9f6030c.jpg" >
        </div>
    </div>
  1. 完整代码
<!DOCTYPE html>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/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">
    <!-- 轮播指标 -->
    <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>
 
    <!-- 轮播的幻灯片项目 -->
    <div class="carousel-inner" role="listbox">
        <div class="item active">
            <img src="http://pic1.win4000.com/wallpaper/2019-02-21/5c6e434e8d2fb.jpg" >
        </div>
        <div class="item">
            <img src="http://pic1.win4000.com/wallpaper/2019-02-11/5c6137ee00320.jpg" >
        </div>
        <div class="item">
            <img src="http://pic1.win4000.com/wallpaper/2019-01-27/5c4d7aa191adb.jpg" >
        </div>
    
        <div class="item">
            <img src="http://pic1.win4000.com/wallpaper/2019-01-27/5c4d7a9f6030c.jpg" >
        </div>
    </div>
</div>

效果展示

可以看到我是通过鼠标点击来实现图片的切换
技术图片

带标题的轮播

代码

和基本轮播的整体结构相同, 不同点是要在轮播的幻灯片项目中添加 Carousel-caption 样式对应的代码块

  • Carousel-caption:表示每个item项应该有标题信息,默认显示下、中位置
<!-- 轮播的幻灯片项目 -->
    <div class="carousel-inner" role="listbox">
        <div class="item active">
            <img src="http://pic1.win4000.com/wallpaper/2019-02-21/5c6e434e8d2fb.jpg" >
            <div class="carousel-caption">
                <h4>标题一</h4>
                <p>图片一内容简介</p>
            </div>
        </div>
        <div class="item">
            <img src="http://pic1.win4000.com/wallpaper/2019-02-11/5c6137ee00320.jpg" >
            <div class="carousel-caption">
                <h4>标题二</h4>
                <p>图片二内容简介</p>
            </div>
        </div>
        <div class="item">
            <img src="http://pic1.win4000.com/wallpaper/2019-01-27/5c4d7aa191adb.jpg" >
            <div class="carousel-caption">
                <h4>标题三</h4>
                <p>图片三内容简介</p>
            </div>
        </div>
    
        <div class="item">
            <img src="http://pic1.win4000.com/wallpaper/2019-01-27/5c4d7a9f6030c.jpg" >
            <div class="carousel-caption">
                <h4>标题四</h4>
                <p>图片四内容简介</p>
            </div>
        </div>
    </div>

效果展示

技术图片

设置轮播速度的轮播

代码

1.添加轮播时间的属性
设置轮播速度也非常简单,不需要进行大改动,只需要在整体的轮播容器上设置 data-interval="1000" 属性
表示每一秒轮播一张图片

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

2.完整代码

<!DOCTYPE html>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/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">
    <!-- 轮播指标 -->
    <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>
 
    <!-- 轮播的幻灯片项目 -->
    <div class="carousel-inner" role="listbox">
        <div class="item active">
            <img src="http://pic1.win4000.com/wallpaper/2019-02-21/5c6e434e8d2fb.jpg" >
            <div class="carousel-caption">
                <h4>标题一</h4>
                <p>图片一内容简介</p>
            </div>
        </div>
        <div class="item">
            <img src="http://pic1.win4000.com/wallpaper/2019-02-11/5c6137ee00320.jpg" >
            <div class="carousel-caption">
                <h4>标题二</h4>
                <p>图片二内容简介</p>
            </div>
        </div>
        <div class="item">
            <img src="http://pic1.win4000.com/wallpaper/2019-01-27/5c4d7aa191adb.jpg" >
            <div class="carousel-caption">
                <h4>标题三</h4>
                <p>图片三内容简介</p>
            </div>
        </div>
    
        <div class="item">
            <img src="http://pic1.win4000.com/wallpaper/2019-01-27/5c4d7a9f6030c.jpg" >
            <div class="carousel-caption">
                <h4>标题四</h4>
                <p>图片四内容简介</p>
            </div>
        </div>
    </div>
</div>

效果展示

技术图片

控制前后的轮播

代码

1.我们要在基本轮播的基础上添加控制前后切换的代码来实现功能
最核心的代码是:data-slide="prev" 属性 data-slide接受关键字 prev 或 next,用来改变幻灯片相对于当前位置的位置。

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

2.完整代码

<!DOCTYPE html>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/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">
    <!-- 轮播指标 -->
    <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>
 
    <!-- 轮播的幻灯片项目 -->
    <div class="carousel-inner" role="listbox">
        <div class="item active">
            <img src="http://pic1.win4000.com/wallpaper/2019-02-21/5c6e434e8d2fb.jpg" >
            <div class="carousel-caption">
                <h4>标题一</h4>
                <p>图片一内容简介</p>
            </div>
        </div>
        <div class="item">
            <img src="http://pic1.win4000.com/wallpaper/2019-02-11/5c6137ee00320.jpg" >
            <div class="carousel-caption">
                <h4>标题二</h4>
                <p>图片二内容简介</p>
            </div>
        </div>
        <div class="item">
            <img src="http://pic1.win4000.com/wallpaper/2019-01-27/5c4d7aa191adb.jpg" >
            <div class="carousel-caption">
                <h4>标题三</h4>
                <p>图片三内容简介</p>
            </div>
        </div>
    
        <div class="item">
            <img src="http://pic1.win4000.com/wallpaper/2019-01-27/5c4d7a9f6030c.jpg" >
            <div class="carousel-caption">
                <h4>标题四</h4>
                <p>图片四内容简介</p>
            </div>
        </div>
    </div>
    <!-- Controls -->
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
</div>

效果展示

技术图片

总结

结合上面的实例,可以总结出:

  • Html结构:主要分为以四个部分
    • 容器:最外层div,需要一个data-ride=”carousel”来指定为轮播放插件,并且提供一个Id,方便圆圈指示符的关联
    • 图片列表部分,用一个外层div包裹所有,然后每个img会被一个div,则class为item的包裹住
    • 圆圈指示符:用一个ol列表来显示其各图形列表项,每个列表项需要指定data-slide-to=”index”属性,用于标记当前圆圈的索引号,ol li 来和最外层的容器进行关联
    • 左右控制按钮:实现向左、向右移动的功能
  • css样式
    • Carousel:只有一个相对定位标记
    • Carousel-inner:旋转图片列表区域,其中每项有item来修饰,其中的active、next、prev都认为是可见的,Carousel-caption:表示每个item项应该有标题信息,默认显示下、中位置
    • Carousel-control:设置向左、向右按钮的样式,其中会设置渐变、透明度等信息,提供了icon-prev、icon-next两种额外样式
    • Carousel-indicators:圆圈部分样式,都是绝对定位,每个li设置为行内块元素,用text-indent:-999来隐藏字体

BootStrap:轮播插件

标签:src   phi   image   OLE   并且   stat   指定   计数器   --   

原文地址:https://www.cnblogs.com/jyroy/p/10416468.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!