bootstrap-轮播图

<!--
    1.写一个父级,class为carousel
        slide:添加滑动的效果
        data-interval    图片轮播间隔时间,单位ms
        data-ride="carousel" 页面一加载后就开始播放
    2.小圆点的内容放在class为carousel-indicators的层里
    3.轮播图的图片区域放在class为carousel-inner的层里
        每一项内容添加class为item的层
        图片说明文字放在class为carousel-caption的层里
    4.    左右按钮 a链接 class为carousel-control left/right
        锚点指向父级
-->
<div class="container">
    <div id="pic" class="carousel slide" data-interval="3000" data-ride="carousel" style="width:510px;margin:0 auto;">
        <!-- 小圆点 -->
        <ol class="carousel-indicators">
            <li class=" active"></li>
            <li></li>
            <li></li>
            <li></li>
        </ol>
        <!--轮播图的图片 -->
        <div class="carousel-inner">
            <div class="item active">
                <img src="a.jpg" />
                <div class="carousel-caption">
                    <h3>小孩子1</h3>
                </div>
            </div>
            <div class="item">
                <img src="b.jpg" />
                <div class="carousel-caption">
                    <h3>小孩子2</h3>
                </div>
            </div>
            <div class="item">
                <img src="c.jpg" />
                <div class="carousel-caption">
                    <h3>美女</h3>
                </div>
            </div>
            <div class="item">
                <img src="d.jpg" />
                <div class="carousel-caption">
                    <h3>海贼王</h3>
                </div>
            </div>
        </div>
        <!-- 左右按钮-->
        <a href="#pic" class="carousel-control left" data-slide="prev">
            <span class="glyphicon glyphicon glyphicon-chevron-left"></span>
        </a>
        <a href="#pic" class="carousel-control right" data-slide="next">
            <span class="glyphicon glyphicon glyphicon-chevron-right"></span>
        </a>
    </div>
</div>

效果:

时间: 2024-09-30 23:58:21

bootstrap-轮播图的相关文章

bootstrap轮播图 两侧半透明阴影

用bootstrap轮播图:Carousel插件,图片两侧影音实在碍眼,想去掉,首先发现有css里由opacity: 0.5这个东西来控制,全部改成opacity: 0.0,发现指示箭头也看不见了. 然后各种搜索,发现原来是应该这么改: .carousel-control.left { /*background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.0001) 100%); back

Angular与bootstrap轮播图的结合使用

在做项目中碰到一处这样的bootstrap的轮播图的使用,数据要用angular动态绑定上去.公司logo图片,职位,公司名称 记录下做完后踩的坑. 1. 首先是使用bootstrap的轮播图示例代码进行改造 <div id="myCarousel" class="carousel slide" interval="false"//此次不需要自动轮播,添加此声明 data-pause="pause" //鼠标悬停后移出后

第124天:移动web端-Bootstrap轮播图插件使用

Bootstrap JS插件使用 > 对于Bootstrap的JS插件,我们只需要将文档实例中的代码粘到我们自己的代码中> 然后作出相应的样式调整 Bootstrap中轮播图插件叫作Carousel 一.基本的轮播图实现 HTML代码 1 <!-- 2 以下容器就是整个轮播图组件的整体, 3 注意该盒子必须加上 class="carousel slide" data-ride="carousel" 表示当前是一个轮播图 4 bootstrap.js

新手——bootstrap轮播图

使用bootstrap插件来写轮播图 1.   首先要写一个<div>容器:<div id="myCarousel" class="carousel" data-slide="carouse"></div> data-slide="carouse"可以让图片自己轮播,如果要把轮播图片居中,可以在容器外加上<div class="container"></

bootstrap轮播图carousel插件

一.基本介绍见:https://www.runoob.com/bootstrap/bootstrap-carousel-plugin.html 二.例子:在PC端使用轮播图(高度固定,图片居中,容器铺满,使用背景图) <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- 指示器 --> <ol clas

Bootstrap 轮播图(Carousel)插件

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> <link rel="icon" type="image/x-icon" href="../img/favicon.ico"/> <script type

bootstrap轮播图

<!doctype html><html><head> <meta charset="utf-8"> <title>使用carousel</title> <!-- Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="/stylesheets/bootstrap.min.css"> <!-- j

bootstrap 轮播图使用

1.html <div id="myCarousel" class="carousel slide"> <!--设置轮播器区域样式,设置轮播器滚动样式--> <ol class="carousel-indicators"> <!--设置轮播器列表区域样式,就是小圆点区域样式--> <li data-target="#myCarousel" data-slide-to=&qu

bootstrap 2版本轮播图

使用bootstrap 2的轮播图遇到了一些小问题,在这里记录总结一下. 1. 问题:Uncaught TypeError: e is not a function. 原因:jquery.js没有放在bootstrap.js之前,按照要求以及JS的加载顺序来说,jq一定要放在bootstrap.js之前,查看代码果然是这个原因 2. 问题:点击圆点和左右切换按钮,没有效果,且不报错,但是轮播可以自动播放 原因:对bootstrap轮播图的不理解. ①控制图片切换的圆点属性"data-target

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

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