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{

    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：轮播插件的更多相关文章

第二百四十八节，Bootstrap轮播插件
Bootstrap轮播插件学习要点: 1.轮播插件本节课我们主要学习一下 Bootstrap 中的轮播插件. 一．轮播轮播插件就是将几张同等大小的大图,按照顺序依次播放. 基本实例. 第一步,给 ...
Bootstrap 轮播插件
一．轮播 //基本实例. <div id="myCarousel" class="carousel slide"> <ol class=&qu ...
让Bootstrap轮播插件carousel支持左右滑动手势的三种方法
因为最近开发的项目涉及到移动设备上的 HTML5 开发,其中需要实现轮播效果.然后最快捷的方式,你知道的(Bootstrap),然后原生的 Bootstrap 的 carousel.js 插件并没有支 ...
第八章让Bootstrap轮播插件carousel支持左右滑动手势的三种方法
因为最近开发的项目涉及到移动设备上的 HTML5 开发,其中需要实现轮播效果.然后最快捷的方式,你知道的(Bootstrap),然后原生的 Bootstrap 的 carousel.js 插件并没有支 ...
Bootstrap_让Bootstrap轮播插件carousel支持左右滑动手势的三种方法
Bootstrap 的 carousel.js 插件并没有支持手势. 3种解决方案 : jQuery Mobile (http://jquerymobile.com/download/) $(&quo ...
BootStrap 轮播插件(carousel)支持左右手势滑动的方法(三种)
原生的 Bootstrap 的 carousel.js 插件并没有支持手势,有下面3种解决方案 : 1. jQuery Mobile (http://jquerymobile.com/download ...
Bootstrap轮播（carousel）插件中图片变形的终极解决方案——使用jqthumb.js
在顶求网的首页中我使用了BootStrap的轮播(carousel)插件来展示文章中的图片.我在程序中自动抓取文章的第一张图片作为该轮播控件中要显示的图片,由于文章的图片大小不一,而轮播插件的大小基本 ...
Bootstrap 轮播（Carousel）插件
Bootstrap 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式.除此之外,内容也是足够灵活的,可以是图像.内嵌框架.视频或者其他您想要放置的任何类型的内容. 如果您想要单独引 ...
使用BootStrap框架中的轮播插件
在使用bootstrap框架中的轮播插件时,效果做出来后,无法通过点击小圆行的按钮来选择特定的图片. 后面发现是最开始的<div>标签中少写了一个id.一开始<div>标签是这 ...
Bootstrap 轮播(Carousel)插件
轮播插件是一种灵活的响应式的向站点添加滑块的方式.除此之外,内容也是非常灵活的.可是图像,内嵌框架,视频或者其它您想的放置任何内容的类型. 下面是一个简单的幻灯片,使用轮播(carousel)插件显示 ...

随机推荐

0510JS运算符
|-运算符|--基础运算符 + - * / %|----加号:数字的求和.字符串的拼接|----减号:数字的减法.对数字取反|----乘法.除法.取余 var a = 10; var b = 10; ...
从源码谈谈 redux compose
compose,英文意思组成,构成. 它的作用也是通过一系列的骚操作,实现任意的.多种的.不同的功能模块的组合,用来加强组件. 看看源码 https://github.com/reactjs/red ...
转 Web用户的身份验证及WebApi权限验证流程的设计和实现
前言:Web 用户的身份验证,及页面操作权限验证是B/S系统的基础功能,一个功能复杂的业务应用系统,通过角色授权来控制用户访问,本文通过Form认证,Mvc的Controller基类及Action的权 ...
Python_marshal模块操作二进制文件
import marshal #导入模块 x1=30 #待序列化的对象 x2=5.0 x3=[1,2,3] x4=(4,5,6) x5={'a':1,'b':2,'c':3} x6={7,8,9} x ...
JDK1.8的新特性
JAVA8新特性接口改善现在接口里已经完全可以定义静态方法了. 举一个比较普遍的例子就是在java类库中, 对于一些接口如Foo, 都会有一个有静态方法的工具类Foos 来生成或者配合Foo对象实 ...
GROUP BY 和 ORDER BY一起使用时的注意点
order by的列,必须是出现在group by子句里的列ORDER BY要在GROUP BY的后面
JQ无缝轮播图-插件封装
类似京东的这种无缝轮播效果: 实例代码下载 HTML代码: <body>  <div class="test" ...
关于Linux虚拟化技术KVM的科普科普三(From OenHan)
http://oenhan.com/archives,包括<KVM源代码分析1:基本工作原理>.<KVM源代码分析2:虚拟机的创建与运行>.<KVM源代码分析3:CPU虚 ...
基于Emit实现的C#版本的BeanCopier
在java的技术栈当中,著名的Cglib库里面有一个BeanCopier,这个类的功能就是可以完成两个对象的属性复制工作(哪怕属于两个不同的类). 今天本人通过.net内置的System.Reflec ...
spring-security doc logout
18.5.3 Logging Out Adding CSRF will update the LogoutFilter to only use HTTP POST. This ensures that ...

BootStrap：轮播插件

前述

实例

基本轮播

代码

效果展示

带标题的轮播

代码

效果展示

设置轮播速度的轮播

代码

效果展示

控制前后的轮播

代码

效果展示

总结

BootStrap：轮播插件的更多相关文章

随机推荐

热门专题