<!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. react框架下,在页面内加载显示PDF文件,关于react-pdf-js的使用注意事项

    react框架下,在页面内加载显示PDF文件,关于react-pdf-js的使用注意事项 之前做了一个需求,在注册账号的时候,让用户同意服务条款, 服务条款是一个PDF文件, 这就需要在react内加 ...

  2. Bert源码阅读

    前言 对Google开源出来的bert代码,来阅读下.不纠结于代码组织形式,而只是梳理下其训练集的生成,训练的self-attention和multi-head的具体实现. 训练集的生成 主要实现在c ...

  3. 洛谷 1131 [ZJOI2007] 时态同步

    题目描述 小Q在电子工艺实习课上学习焊接电路板.一块电路板由若干个元件组成,我们不妨称之为节点,并将其用数字1,2,3….进行标号.电路板的各个节点由若干不相交的导线相连接,且对于电路板的任何两个节点 ...

  4. Java多线程遍历文件夹,广度遍历加多线程加深度遍历结合

    复习IO操作,突然想写一个小工具,统计一下电脑里面的Java代码量还有注释率,最开始随手写了一个递归算法,遍历文件夹,比较简单,而且代码层次清晰,相对易于理解,代码如下:(完整代码贴在最后面,前面是功 ...

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

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

  6. centos linux ip地址无法连接数据库，ssh登录服务器时必须使用22端口

    问题一:连接数据库时直接使用ip地址无法连接,必须使用ssh方式才能连接? 问题二:ssh登录服务器时必须使用22端口,在/etc/ssh/sshd_config中添加了10086端口,防火墙中已开启 ...

  7. Capistrano:自动完成多台服务器上新版本的同步更新，包括数据库的改变

    https://baike.baidu.com/item/Capistrano/6844928?fr=aladdin   Capistrano是一种在多台服务器上运行脚本的开源工具,它主要用于部署we ...

  8. P1037 最小公倍数

    题目描述 给你两个正整数A和B,求它们的最小公倍数. 输入格式 两个正整数 \(A,B(1 \le A,B \le 10^9)\) . 输出格式 一个整数,表示A和B的最小公倍数. 样例输入 6 8 ...

  9. H3C 示例：根据主机地址数划分子网

  10. D3.js力导向图(适用于其他类型图)中后添加元素遮盖已有元素的问题解决

    上一篇说了在D3.js中动态增加节点及连线的一种实现方式,但是有后添加元素遮盖原节点的现象,这一篇说一下出现这个现象的解决办法. 在D3.js中后添加的元素是会遮盖先添加的元素的,同时还有一个设定:后 ...