菜单

Bootstrap carousel轮转图的运

2018年11月15日 - Bootstrap
来自:慕课网
http://www.imooc.com/code/5395

图形轮播效果在Web中时时能够看,很多人口啊叫幻灯片。其重大显示的职能即使是大抵幅图片轮回播放,从右边为左播放,鼠标悬停在图纸时会暂停播放,如果鼠标悬停或单击右下比赛圆点时,会显得相应的图样。

 

这种图片轮播效果,在Bootstrap框架中凡通过Carousel插件来实现

图表轮播效果在Web中不时能够来看,很多丁耶号称幻灯片。其根本显示的功能就算是基本上帧图轮回播放,

示范效果截图:

自从右边为左播放,鼠标悬停在图片时会中断播放,如果鼠标悬停或单击右下比赛圆点时,会展示相应的图纸。

图片 1

这种图片轮播效果,在Bootstrap框架中凡是透过Carousel插件来促成

代码:

演示效果截图:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">-->
<link rel="stylesheet" href="css/bootstrap.min.css" />
<style>
body {
padding: 10px;
margin: 10px;
}
</style>
</head>
<body>
<div id="myCarousel" class="carousel">
<!--第一步:设计轮播图片的容器。-->
<!-- #slidershow 层添加 slide 样式,使用图片与图片切换效果有平滑感-->
<ol class="carousel-indicators">
<!--第二步:设计轮播图片计数器。-->
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<!--第三步:设计轮播图片播放区,使用 carousel-inner 样式来控制-->
<div class="item active">
<img src="http://images3.c-ctrip.com/rk/201407/ll580x145.jpg" alt="图片 2">
<div class="carousel-caption">
<h4>标题一</h4>
<p>图片一内容简介</p>
</div>
</div>
<div class="item">
<img src="http://images3.c-ctrip.com/dj/201408/zj/zj_580145.jpg" alt="图片 3">
<div class="carousel-caption">
<h4>标题二/h4>
<p>图片二内容简介</p>
</div>
</div>
<div class="item">
<img src="http://images3.c-ctrip.com/rk/201403/yfdd580145a.png" alt="图片 4">
<div class="carousel-caption">
<h4>标题三</h4>
<p>图片三内容简介</p>
</div>
</div>
</div>
<!--第四步:设计轮播图片控制器。向前播放left carousel-control和向后播放的控制器-->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹
<!--<a class="left carousel-control" href="#slidershow" role="button" data-slide="prev">-->
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">›
</a>
<!--<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">

</a>
<a class="left carousel-control" href="#carousel-example-generic" data-slide="next">

</a>-->
</div>
<script>
$('.carousel').carousel()
</script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<!--<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>-->
<!--<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>-->
</body>
</html> 
/*bootstrap.css文件第5835行~第5863行*/
.carousel-indicators {
position: absolute; /*整个计数区域绝对定位*/
bottom: 10px; /*距容器carousel底部10px*/
z-index: 15; /*设置其在Z轴的层级*/
/*让整个计数区水平居中*/
left: 50%;
width: 60%;
padding-left: 0;
margin-left: -30%;
text-align: center;
list-style: none;
}
.carousel-indicators li {
display: inline-block;
width: 10px;
height: 10px;
margin: 1px;
text-indent: -999px;
cursor: pointer;
background-color: #000 \9;
background-color: rgba(0, 0, 0, 0);
border: 1px solid #fff;
border-radius: 10px;
}
/*设置当前状态样式*/
.carousel-indicators .active {
width: 12px;
height: 12px;
margin: 0;
background-color: #fff;
}

图片 5

图表轮播–声明式触轮播图的广播

代码:

触发轮播图的播报方式吗发点儿种植,一种植是声明式,另外一种是JavaScript方式。首先来拘禁声明式方法。

 

声明式方法是经定义 data 属性来贯彻,data
属性可以挺轻地操纵轮播的职位。其关键包括以下几种:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <!--        <link rel="stylesheet"  >-->
        <link rel="stylesheet" href="css/bootstrap.min.css" />
        <style>
            body {
                padding: 10px;
                margin: 10px;
            }
        </style>
    </head>

    <body>
        <div id="myCarousel" class="carousel">
            <!--第一步:设计轮播图片的容器。-->
            <!--            #slidershow 层添加 slide 样式,使用图片与图片切换效果有平滑感-->
            <ol class="carousel-indicators">
                <!--第二步:设计轮播图片计数器。-->
                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#myCarousel" data-slide-to="1"></li>
                <li data-target="#myCarousel" data-slide-to="2"></li>
            </ol>

            <div class="carousel-inner">
                <!--第三步:设计轮播图片播放区,使用 carousel-inner 样式来控制-->
                <div class="item active">
                    <img src="http://images3.c-ctrip.com/rk/201407/ll580x145.jpg" alt="图片 6">
                    <div class="carousel-caption">
                        <h4>标题一</h4>
                        <p>图片一内容简介</p>
                    </div>
                </div>
                <div class="item">
                    <img src="http://images3.c-ctrip.com/dj/201408/zj/zj_580145.jpg" alt="图片 7">
                    <div class="carousel-caption">
                        <h4>标题二/h4>
                   <p>图片二内容简介</p>
                </div>
            </div>
            <div class="item">
                <img src="http://images3.c-ctrip.com/rk/201403/yfdd580145a.png" alt="图片 8">
                <div class="carousel-caption">
                  <h4>标题三</h4>
                        <p>图片三内容简介</p>
                    </div>
                </div>
            </div>
            <!--第四步:设计轮播图片控制器。向前播放left carousel-control和向后播放的控制器-->
            <a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;
        <!--<a    role="button" data-slide="prev">-->
            </a>
            <a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;
            </a>
            <!--<a    data-slide="prev">

            </a>
            <a    data-slide="next">

            </a>-->
        </div>

        <script>
            $('.carousel').carousel()
        </script>

        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript" src="js/bootstrap.min.js"></script>

        <!--<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>-->
        <!--<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>-->
    </body>

</html>

•data-ride 属性:取值 carousel,并且以那个定义在 carousel 上。

 

•data-target 属性:取值 carousel 定义之 ID
名或者其它样式识别符,如前方示例所示,取值为“#slidershow”,并且用该定义在轮播图计数器的每个
li 上。

 

•data-slide 属性:取值包括 prev,next,prev代表于后滚动,next
代表向前滚动。该属性值同样定义在轮播图控制器的 a 链接上,同时安装控制器
href 值为容器 carousel 的 ID 名或外样式识别符。

图片 9图片 10

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

/*bootstrap.css文件第5835行~第5863行*/
.carousel-indicators {
    position: absolute; /*整个计数区域绝对定位*/
    bottom: 10px; /*距容器carousel底部10px*/
    z-index: 15; /*设置其在Z轴的层级*/
    /*让整个计数区水平居中*/
    left: 50%;
    width: 60%;
    padding-left: 0;
    margin-left: -30%;
    text-align: center;
    list-style: none;
}
.carousel-indicators li {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 1px;
    text-indent: -999px;
    cursor: pointer;
    background-color: #000 \9;
    background-color: rgba(0, 0, 0, 0);
    border: 1px solid #fff;
    border-radius: 10px;
}
/*设置当前状态样式*/
.carousel-indicators .active {
    width: 12px;
    height: 12px;
    margin: 0;
    background-color: #fff;
}

除去data-ride=”carousel”、data-slide、data-slide-to
以外,轮播组件还支持外三个自定义属性:

在 Bootstrap
框架中,轮播图片计数器,都是以圆点向大家展现,其具体样式如下:

属性名称
类型
默认值
描述
data-interval
number
5000
幻灯片轮换的等待时间(毫秒)。如果为false,轮播将不会自动开始循环
data-pause
string
hover
默认鼠标悬停留在幻灯片区域即停止播放,离开即开始播放
data-wrap
布尔值
true
轮播是否持续循环

 

一般来说代码实现“轮播不随地循环”和“轮播时间间隔也1秒”。

图轮播–声明式触轮播图的广播

触发轮播图的播放方式吗发一定量种,一种是声明式,另外一栽是JavaScript方式。首先来拘禁声明式方法。

声明式方法是经过定义 data 属性来贯彻,data
属性可以挺易地操纵轮播的岗位。其要不外乎以下几种植:

除去data-ride=”carousel”、data-slide、data-slide-to
以外,轮播组件还支持其他三独自定义属性:

属性名称

类型

默认值

描述

data-interval

number

5000

幻灯片轮换的等待时间(毫秒)。如果为false,轮播将不会自动开始循环

data-pause

string

hover

默认鼠标悬停留在幻灯片区域即停止播放,离开即开始播放

data-wrap

布尔值

true

轮播是否持续循环

正如代码实现“轮播不随地循环”和“轮播时间间隔也1秒”。

<div id="slidershow"  data-ride="carousel" data-wrap="false" data-interval="1000">
   ......
</div>

地方三个属性可以在容器元素上定义,也得以于标示符(或左右说了算链接)上定义,但是后者定义之先行级比较强。

 

<div id="slidershow" class="carousel" data-ride="carousel" data-wrap="false" data-interval="1000">
......
</div> 

图轮播–JavaScript触发方法

data-ride=”carousel” 和  data-slide=”prev”、 data-slide=”next”
三单告知句去丢了,我们来利用JS代码实现“图片自动轮播”和“向前、向后按钮”的法力实现。

动用JS实现“图片自动轮播”和“向前、向后按钮”的功用实现

默认情况之下,如果 carousel 容器上定义了 data-ride=”carousel”
属性,页面加载后便见面活动加载轮播图片切换效果。如果没有定义 data-ride
属性,可以经 JavaScript 方法来点轮播图片切换。具体应用办法如下:

$(".carousel").carousel();

呢可通过容器的 ID 来指定:

$("#slidershow").carousel();

于 carousel() 方法中得设置具体的参数,如:

属性名称

类型

默认值

描述

interval

number

5000

幻灯片轮换的等待时间(毫秒)。如果为false,轮播将不会自动开始循环

pause

string

hover

默认鼠标悬停留在幻灯片区域即停止播放,离开即开始播放

wrap

布尔值

true

轮播是否持续循环

用时,在初始化插件的时节可传关相关的参数,如:

$("#slidershow").carousel({
       interval: 3000
});

其实,当我们深受carousel()方法配置参数后,轮播效果就是会活动切换。但
Bootstrap 框架中之 carousel
插件还给使用者提供了几乎种植特殊的调用方法,简单说明如下:

如,前面的调用方法,向前同向阳后少个按钮还无法正常工作,其实可以通过
.carousel(“prev”) 和 .carousel(“next”) 方法吃她们能正常干活,代码如下:

$(function(){
    $("#slidershow").carousel({
        interval:2000
    });
    $("#slidershow a.left").click(function(){
        $(".carousel").carousel("prev");
    });
    $("#slidershow a.right").click(function(){
        $(".carousel").carousel("next");
    });
});

 

图片 11图片 12

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
        <style>
            body {
                padding: 10px;
                margin: 10px;
            }
        </style>
    </head>

    <body>
        <div id="carousel-example" class="carousel slide" data-ride="carousel">
            <!-- Indicators -->
            <ol class="carousel-indicators">
                <li data-target="#carousel-example" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-example" data-slide-to="1"></li>
                <li data-target="#carousel-example" data-slide-to="2"></li>
            </ol>
            <!-- Wrapper for slides -->
            <div class="carousel-inner">
                <div class="item active">
                    <img src="http://bfsu.sinaapp.com/wp-content/themes/bfsu/i/homepix/home5.jpg" alt="..." />
                    <div class="carousel-caption">...</div>
                </div>
                <div class="item">
                    <img src="http://bfsu.sinaapp.com/wp-content/themes/bfsu/i/homepix/home2.jpg" alt="..." />
                    <div class="carousel-caption">...</div>
                </div>
                <div class="item">
                    <img src="http://bfsu.sinaapp.com/wp-content/themes/bfsu/i/homepix/home3.jpg" alt="..." />
                    <div class="carousel-caption">...</div>
                </div>
            </div>
            <!-- Controls -->
            <a class="left carousel-control" href="#carousel-example" data-slide="prev">
                </a>
            <a class="right carousel-control" href="#carousel-example" data-slide="next">
                </a>
        </div>
        <!--<script>
            $(function() {
                $('.carousel').carousel();
            });
        </script>-->

        <script src="js/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script>

        <!--<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>-->
        <!--<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>-->
    </body>

</html>

例子

 


地方三单特性可以于容器元素上定义,也可以当标示符(或左右说了算链接)上定义,但是后者定义的优先级比较强。

图形轮播–JavaScript触发方法

data-ride=”carousel” 和 data-slide=”prev”、 data-slide=”next”
三独告知词去丢了,我们来运JS代码实现“图片自动轮播”和“向前、向后按钮”的效益实现。

采用JS实现“图片自动轮播”和“向前、向后按钮”的效用实现

默认情况之下,如果 carousel 容器上定义了 data-ride=”carousel”
属性,页面加载后便会自行加载轮播图片切换效果。如果没概念 data-ride
属性,可以通过 JavaScript 方法来点轮播图片切换。具体以方式如下:

复制代码 代码如下:

$(“.carousel”).carousel();

为得以透过容器的 ID 来指定:

复制代码 代码如下:

$(“#slidershow”).carousel();

于 carousel() 方法中得装具体的参数,如:

属性名称
类型
默认值
描述
interval
number
5000
幻灯片轮换的等待时间(毫秒)。如果为false,轮播将不会自动开始循环
pause
string
hover
默认鼠标悬停留在幻灯片区域即停止播放,离开即开始播放
wrap
布尔值
true
轮播是否持续循环

运时,在初始化插件的时候可以传关相关的参数,如:

$("#slidershow").carousel({
interval: 3000
}); 

实质上,当我们给carousel()方法配置参数后,轮播效果就可知自行切换。但
Bootstrap 框架中的 carousel
插件还给使用者提供了几种特别的调用方法,简单说明如下:

•.carousel(“cycle”):从左为右侧循环播放;

•.carousel(“pause”):停止循环播放;

•.carousel(“number”):循环到指定的轴,下标从0开始,类似数组;

•.carousel(“prev”):返回到直达一帧;

•.carousel(“next”):下一帧

比如说,前面的调用方法,向前同朝后少单按钮还无法正常工作,其实可以透过
.carousel(“prev”) 和 .carousel(“next”)
方法给他俩会健康工作,代码如下:

$(function(){
$("#slidershow").carousel({
interval:2000
});
$("#slidershow a.left").click(function(){
$(".carousel").carousel("prev");
});
$("#slidershow a.right").click(function(){
$(".carousel").carousel("next");
});
}); 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<style>
body {
padding: 10px;
margin: 10px;
}
</style>
</head>
<body>
<div id="carousel-example" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example" data-slide-to="1"></li>
<li data-target="#carousel-example" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://bfsu.sinaapp.com/wp-content/themes/bfsu/i/homepix/home5.jpg" alt="..." />
<div class="carousel-caption">...</div>
</div>
<div class="item">
<img src="http://bfsu.sinaapp.com/wp-content/themes/bfsu/i/homepix/home2.jpg" alt="..." />
<div class="carousel-caption">...</div>
</div>
<div class="item">
<img src="http://bfsu.sinaapp.com/wp-content/themes/bfsu/i/homepix/home3.jpg" alt="..." />
<div class="carousel-caption">...</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example" data-slide="prev">
</a>
<a class="right carousel-control" href="#carousel-example" data-slide="next">
</a>
</div>
<!--<script>
$(function() {
$('.carousel').carousel();
});
</script>-->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!--<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>-->
<!--<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>-->
</body>
</html>

剧本的拙引进bootstrap相关专题:

BootStrap组件操作技能

BootStrap相关知识汇总

以上所述是有点编给大家介绍的Bootstrap
carousel轮转图的应用实例详解的有关知识,希望对大家享有助,如果大家来另问题请给自己留言,小编会及时过来大家之。在此也非常感谢大家对台本的家网站的支撑!

汝可能感兴趣之篇章:

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图