码迷,mamicode.com
首页 > Web开发 > 详细

JS框架_(Bootstrap框架)实现简单的轮播图

时间:2018-07-12 12:54:29      阅读:210      评论:0      收藏:0      [点我收藏+]

标签:target   过程   pause   tst   man   比较   second   菜鸟   简单   

 

Bootstrap框架中 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式

 

轮播图效果:

技术分享图片

 

 

技术分享图片
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>Cary_Bootstrap轮播器</title>
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    
    <style>
    #myCarousel {
    margin: 150px 450px 150px;
    }
    </style>
    
</head>
<body>

<div id="myCarousel" class="carousel 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">
        <div class="item active" align="center">
            <img src="index/11.jpg" alt="First slide">
        </div>
        <div class="item"    align="center">
            <img src="index/22.jpg" alt="Second slide">
        </div>
        <div class="item"    align="center">
            <img src="index/33.jpg" alt="Third slide">
        </div>
    </div>
    

    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" ></span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" ></span>
    </a>
</div> 

</body>
</html>
Index.html

 

实现过程:

 

样式中用margin设置轮播器整体位置

图片比较小,不设置整体位置会让轮播器箭头和图片分隔距离太远。

<style>
#myCarousel {
margin: 150px 450px 150px;
}
</style>

 

技术分享图片
margin相关属性

margin简写属性在一个声明中设置所有外边距属性。该属性可以有1-4个值。margin的默认值是0。没有继承性,也就是说给父元素设置的margin值并不会自动传递到子元素中。

一个参数

margin: 10px;
1
所有4个外边距都是10px
两个参数

margin: 10px 5px;
1
上外边距和下外边距是10px
右外边距和左外边距是5px
三个参数

margin: 10px 5px 15px;
1
上外边距是10px
右外边距和左外边距是5px
下外边距是15px
四个参数

margin: 10px 5px 15px 20px;
1
上外边距是10px
右外边距是5px
下外边距是15px
左外边距是20px
设置四个外边距的顺序是上、右、下、左,请记住顺时针即可。
margin参数属性值

margin属性详解:传送门

 

一、给轮播器添加指标
    <ol class="carousel-indicators">         <!--设置轮播器列表区域样式-->
                                                                                  <!--data-slide-to 给每张图片设置一个指标-->
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>    <!--class="active"设置播放当前页面-->
        <li data-target="#myCarousel" data-slide-to="1"></li>                    
        <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>  

data-target="#myCarousel"写在轮播器列表li标签里,将轮播绑定轮播器区域div的id

data-slide-to="0"写在轮播器列表li标签里,将轮播器列表编号,默认从0开始


二、添加轮播图片
    <div class="carousel-inner">                      <!--设置轮播器图片区域-->
        <div class="item active" align="center">         <!--设置轮播器图片样式、居中显示-->
            <img src="index/11.jpg" alt="First slide">
        </div>
        <div class="item"    align="center">
            <img src="index/22.jpg" alt="Second slide">
        </div>
        <div class="item"    align="center">
            <img src="index/33.jpg" alt="Third slide">
        </div>
    </div>
(设置图片大小:<img style="height: height px ;   width: width px">)


三、设置轮播器箭头

data-slide 关键字 prev 或 next,用来改变幻灯片相对于当前位置的位置,可以用data-slide-to="2" 将把滑块移动到一个特定的索引,索引从 0 开始计数
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" ></span>
    </a>
    <!--carousel-control轮播器箭头样式-->
    <!--href="#myCarousel"写在轮播器箭头a标签里,将a标签连接href=轮播器区域div的id-->
    <!--data-slide="prev"写在轮播器箭头a标签里,设置箭头左点击事件--
    <!--span标签标glyphicon-chevron-let设置图标自动靠左-->
    
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" ></span>
    </a>

 

 

技术分享图片
属性名称           类型      默认值         描述

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

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

data-wrap        布尔值      true    轮播是否持续循环-->
data 属性

 

技术分享图片
$(function () {
    $(‘#myCarousel‘).carousel({
        //设置自动播放/3 秒
        interval: 3000,
    });
});
js修改轮播间隔时间

 

 

 

 

 

 

参考资料:菜鸟教程 Bootstrap 轮播(Carousel)插件  传送门

JS框架_(Bootstrap框架)实现简单的轮播图

标签:target   过程   pause   tst   man   比较   second   菜鸟   简单   

原文地址:https://www.cnblogs.com/1138720556Gary/p/9297496.html

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