<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1, user-scalable=no">

<title>图片轮播</title>

<link rel="stylesheet" href="css/bootstrap.css">

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

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

</head>

<body style="padding-left: 350px; padding-top: 150px">

    <div class="carousel slide" data-toggle="carousel" id="page" style="width: 500px;" data-ride="carousel" data-interval="3000">

        <div class="carousel-inner">

            <div class="item active"><img src="https://i.loli.net/2018/09/13/5b99ce0aad0d5.jpg" style="width: 500px; height: 282px;"></div>

            <div class="item"><img src="https://i.loli.net/2018/09/13/5b99e2dbdcfee.jpg" style="width: 500px;height: 282px;"></div>

            <div class="item"><img src="https://i.loli.net/2018/09/13/5b99e30fc8278.jpg" style="width: 500px;height: 282px;"></div>

            <div class="item"><img src="https://i.loli.net/2018/09/13/5b99e32cc27e2.jpg" style="width: 500px;height: 282px;"></div>

        </div>

        <a href="#page" class="carousel-control left" data-slide="prev"></a>

        <a href="#page" class="carousel-control right" data-slide="next"></a>

        <ul class="carousel-indicators">

            <li data-target="#page" data-slide-to="0" class="active"></li>

            <li data-target="#page" data-slide-to="1"></li>

            <li data-target="#page" data-slide-to="2"></li>

            <li data-target="#page" data-slide-to="3"></li>

        </ul>

    </div>

</body>

</html>

示例图：

bootstrap:图片轮播的更多相关文章

  1. bootstrap 图片轮播效果

    <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="http: ...

  2. 全面解析Bootstrap图片轮播效果

    http://www.jb51.net/article/75806.htm 一 . 结构分析 一个轮播图片主要包括三个部分: ☑ 轮播的图片 ☑ 轮播图片的计数器 ☑ 轮播图片的控制器 第一步:设计轮 ...

  3. bootstrap图片轮播

    <div class="carousel slide" id="myCarsousel" style="width:790px;"&g ...

  4. 图片轮播（bootstrap）与 圆角搜索框(纯css)

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  5. 利用bootstrap写图片轮播

    利用bootstrap写图片轮播 缺点是轮播没有固定样式图片样式会改变外框的大小,所以要再设置 以及左右按钮的style也要从新设置 <div class="carousel slid ...

  6. 基于bootstrap的图片轮播效果展示

    <!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="utf-8&q ...

  7. bootstrap中的动态加载出来的图片轮播中的li标签中的class="active"的动态添加移除

    //该方法是在slide改变时立即触发该事件, $('#myCarousel').on('slide.bs.carousel', function () { $("#myCarousel o ...

  8. 基于bootstrap的轮播广告页，带图片和文字

    <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8& ...

  9. 使用Ajax+jQuery来实现前端收到的数据在console上显示+简单的主页设计与bootstrap插件实现图片轮播

    1.实现前端输入的数据在console上显示 上一篇是解决了在前端的输入信息在cygwin上显示,这次要给前台们能看见的数据,因为数据库里插入的数据少,所以写的语句翻来覆去就那几个词,emmm···当 ...

随机推荐

  1. phpStudy本地环境测试，打开网页很慢的解决办法！

    很多人应该都遇到了在使用phpStudy本地环境测试软件时候打开很慢的问题,甚至动辄达到了1000ms以上,开篇直接给出解决办法: 下面给大家介绍phpstudy访问速度慢的解决办法. 1.修改mys ...

  2. pip 将 某包指定到某目录 安装

    pip 将 某包指定到某目录  安装: pip install --target=d:\somewhere\other\than\the\default package_name

  3. cf1234-div3

    A 水题 B 直接看2,发现`unordered_map被卡了...` 乖乖离散化 C 有六种水管,可以任意的旋转,使得有一条从(1, 0)到(2, n)的通路. 找规律,当时写D没来得及看 #inc ...

  4. Laravel根据Ip获取国家，城市信息

    https://blog.csdn.net/zhezhebie/article/details/79097133 1.安装: composer require geoip2/geoip2:~2.0 2 ...

  5. get和post的区别？

    GET:一般用于信息获取,使用URL传递参数,对所发送信息的数量也有限制,一般在2000个字符 POST:一般用于 修改服务器上的资源,对所发送的信息没有限制. GET方式需要使用Request.Qu ...

  6. Python--day69--ORM正反向查找（外键）

    ForeignKey操作 正向查找 对象查找(跨表) 语法: 对象.关联字段.字段   示例: book_obj = models.Book.objects.first() # 第一本书对象 prin ...

  7. [C++] 检查随机内存溢出

    C++程序的随机内存溢出是非常难处理的,windows提供了一些工具来缓解这个问题. windows debuger提供的Global Flags可以设置"enable heap tail ...

  8. Fast Stone截图工具使用教程

    下面是Fast Stone的显示面板,很小巧,但功能强大 一.特殊功能 1.1 添加水印 (1)选择功能栏的"Edge" (2)将要水印的图片选中,选择水印图片的放置位置,应用即可 ...

  9. Linux 内核 EISA 总线

    扩展 ISA (EISA) 总线是一个对 ISA 的 32-位 扩展, 带有一个兼容的接口连接器; ISA 设备板可被插入一个 EISA 连接器. 增加的线在 ISA 接触之下被连接. 如同 PCI ...

  10. Python5_学习方法论

    学习路线: 1.对基础知识的全面掌握,熟悉IDE和基本概念,注重知识体系构建: 2.开发实战.在该过程中掌握各类框架知识.熟悉模块的使用.并根据问题深入学习: ==================== ...