<!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. 2018-2-13-win10-uwp-获得Slider拖动结束的值

    title author date CreateTime categories win10 uwp 获得Slider拖动结束的值 lindexi 2018-2-13 17:23:3 +0800 201 ...

  2. 在做微信分享到朋友圈时，手机扫码报config:invalid signature，分享后后正常的问题，是url问题

    是按照以下步骤检查的 除了ACCESS_TOKEN没有缓存其他都可以 如果是invalid signature签名错误.建议按如下顺序检查: 1.确认签名算法正确,可用 http://mp.weixi ...

  3. hdu 1255 覆盖的面积 (Bruceforce)

    Problem - 1255 暴力统计覆盖超过一次的区域.1y. 代码如下: #include <cstdio> #include <cstring> #include < ...

  4. 【C++竞赛 B】yyy的回文数组

    时间限制:1s 内存限制:32MB 问题描述 回文串是一个正读和反读都一样的字符串,比如level或者noon就是回文串.回文数组也是如此,比如[100,200,100]或者[178,256,256, ...

  5. PTA 6-2 多项式求值

    PTA 6-2 多项式求值 本题要求实现一个函数 本题要求实现一个函数,计算阶数为n,系数为a[0] ... a[n]的多项式f(x)=∑i=0n(a[i]×xi)" role=" ...

  6. Navicat for MySQL 使用SSH方式链接远程数据库（二）

    这里我们使用SSH连接远程mysql数据库 2 SSH这种方式,可以使我们连接到远程服务器,但是现在并不能访问数据库,因为我们还没有连接到数据库 3 既然已经连接到服务器了,我们就该连接服务器上的数据 ...

  7. Vue2.0做的项目在IE下面打开一片空白？

    解决方式:安装 "babel-polyfill" 即可. 命令:cnpm install --save-dev babel-polyfill 在入口main.js文件引入:impo ...

  8. Scrap简介

    原文:https://blog.csdn.net/ssw_1990/article/details/51254227 提到Python与网络爬虫,可能会想到urllib,urllib2,Beautif ...

  9. H3C IGP与EGP

  10. H3C创建本地用户

    [H3C]Local-user wang                 //创建本地用户--对应上面scheme的 [H3C-luser-wang]Password cipher 456      ...