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.js)实现简单的轮播图的更多相关文章

  1. js渐隐渐现透明度变化淡入淡出轮播图

    js渐隐渐现透明度变化淡入淡出轮播图.焦点图 一些广告banner展示常见. (附件) <!DOCTYPE html> <html> <head> <meta ...

  2. 第二百五十一节，Bootstrap项目实战--响应式轮播图

    Bootstrap项目实战--响应式轮播图 学习要点: 1.响应式轮播图 本节课我们要在导航条的下方做一张轮播图,自动播放最新的重要动态. 一．响应式轮播图 响应式轮播图 第一步,设置轮播器区域car ...

  3. 原生js实现一个简单的轮播图

    想锻炼一下自己的原生js能力可以从写一个轮播图开始,轮播图的运用想必大家都知道吧,好了废话不多说,开始记笔记了,一些需要注意的点,我都在代码中标注了 首先是构造html: <div id=&qu ...

  4. 原生js用div实现简单的轮播图

    文章地址 https://www.cnblogs.com/sandraryan/ 原生js实现轮播图. 打开页面图片自动轮播,点击prev next按钮切换到上/下一张图片,点击1-5切换到对应图片. ...

  5. <day006>bootstrap的简单学习 + 轮播图

    任务1:bootstrap的简单学习 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta c ...

  6. js原生选项卡（自动播放无缝滚动轮播图）二

    今天分享一下自动播放轮播图,自动播放轮播图是在昨天分享的轮播图的基础上添加了定时器,用定时器控制图片的自动切换,函数中首先封装一个方向的自动播放工能的小函数,这个函数中添加定时器,定时器中可以放向右走 ...

  7. 最最最简单的轮播图(JQuery)

    html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  8. jQuery之制作简单的轮播图效果

    [源代码] 链接:https://pan.baidu.com/s/1XpZ66D9fmSwWX3pCnGBqjA 密码:w104 [整体构思] 这个轮播图使用的是jQuery,所以Js的整体代量比较少 ...

  9. 基于JQ的简单左右轮播图

    // 轮播图 主要实现思想: a.第一层div,设置overflow为hidden. b.里面是一个ul,每个li里面有个img或者为每个li设置背景图片也可以. c.li设置为左浮动,排成一行,还有 ...

随机推荐

  1. 01串LIS（固定串思维）--Kirk and a Binary String (hard version)---Codeforces Round #581 (Div. 2)

    题意:https://codeforc.es/problemset/problem/1204/D2 给你一个01串,如:0111001100111011101000,让你改这个串(使0尽可能多,任意 ...

  2. python之函数、面向对象

    学习python到了函数这一块进度有所放缓,主要还是想理解透彻,毕竟直觉告诉我函数是python是其中的关键,不管是模块.还是包.或者是库,都是建立在若干个函数定义上面. 章节后面就是关于面向对象编程 ...

  3. HTML(下)

    目录 HTML(下) form表单 表单功能 表单属性 <input>输入标签(文本框)(内联标签) <select>下拉列表标签(内联标签) <textarea> ...

  4. 使用parquet-hadoop.jar包解析hive parquet文件时，遇到FIXED_LEN_BYTE_ARRAY转换为Decimal 以及 INT96转换为timestamp问题

    在使用parquet-hadoop.jar包解析parquet文件时,遇到decimal类型的数据为乱码,具体解决方法如下: 使用parquet-Hadoop.jar解析httpfs服务提供的parq ...

  5. 面试常考的js题目（一）

    1.找出dom文档中某个元素下面的所有文字(面试写的一塌糊涂,回来重写的) 1.返回回数组形式的 function getText(ele) { if (ele.nodeType === 3) { r ...

  6. shiro登陆流程

    登录请求被FormAuthenticationFilter拦截 FormAuthenticationFilter会执行其父类AdviceFilter的doFilterInternal方法 其代码如下: ...

  7. java中接口知识点大总结

    接口的确很不好理解!!!!!那我来好好总结一下: 首先要理解接口是一个独立存在的,和类是不一样的东西,所以,直接用接口的定义是: 访问权限控制符 interface 接口名 [extends  接口列 ...

  8. Task的取消

    原文:.NET 4 并行(多核)编程系列之三 从Task的取消 .NET 4 并行(多核)编程系列之三 从Task的取消 前言:因为Task是.NET 4并行编程最为核心的一个类,也我们在是在并行编程 ...

  9. 无障碍开发（二）之ARIA role属性

    role属性 role属性值 含义 HTML示意 说明 alert 表示警告 <p id="ajax_error_alert" role="alert"& ...

  10. luogu P4482 [BJWC2018]Border 的四种求法

    luogu 对于每个询问从大到小枚举长度,哈希判断是否合法,AC 假的(指数据) 考虑发掘border的限制条件,如果一个border的前缀部分的末尾位置位置\(x(l\le x < r)\)满 ...