zoukankan html css js c++ java

BootStrap：轮播插件

前述

利用 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>

完整代码

<!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{
    100%;
   }
  div#carousel-example-generic{
    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{
    100%;
   }
  div#carousel-example-generic{
    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{
    100%;
   }
  div#carousel-example-generic{
    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来隐藏字体

查看全文

相关阅读:
不常用的cmd命令
 js获取宽度
 Marshaling Data with Platform Invoke 概览
 Calling a DLL Function 之三 How to: Implement Callback Functions
Marshaling Data with Platform Invoke 之四 Marshaling Arrays of Types
Marshaling Data with Platform Invoke 之一 Platform Invoke Data Types
Marshaling Data with Platform Invoke 之三 Marshaling Classes, Structures, and Unions（用时查阅）
Calling a DLL Function 之二 Callback Functions
WCF 引论
 Marshaling Data with Platform Invoke 之二 Marshaling Strings （用时查阅）

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