<!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. oralce 分离表和索引

    总是将你的表和索引建立在不同的表空间内(TABLESPACES). 决不要将不属于ORACLE内部系统的对象存放到SYSTEM表空间里. 同时,确保数据表空间和索引表空间置于不同的硬盘上.   “同时 ...

  2. 数(aqnum)

    数(aqnum) 3.1 题目描述 秋锅对数论很感兴趣,他特别喜欢一种数字.秋锅把这种数字命名为 农数 ,英文名为 AQ number . 这种数字定义如下: 定义 1 一个数 n 是农数,当且仅当对 ...

  3. vue4——把输入框的内容添加到页面（简单留言板）

    文章地址:https://www.cnblogs.com/sandraryan/ vue最最最简单的demo(记得引入) 实例化一个vue,绑定#app的元素,要渲染的数组arr作为data. 把ar ...

  4. 【CSS3】使用CSS3制作全屏切换效果

    在线演示: DEMO DEMO中及以下代码并没有写兼容代码,请使用高级浏览器打开,IE版本对CSS3支持并不太友好,IE11打开没有滚屏效果. 兼容代码前缀: -webkit- -moz- -o- - ...

  5. js用for循环模拟数组翻转

    文章地址 https://www.cnblogs.com/sandraryan/ js本身为数组提供了reverse()方法,可以翻转数组,返回一个新的数组,不影响原数组. 本例中用for循环简单模拟 ...

  6. 机器学习降维方法概括， LASSO参数缩减、主成分分析PCA、小波分析、线性判别LDA、拉普拉斯映射、深度学习SparseAutoEncoder、矩阵奇异值分解SVD、LLE局部线性嵌入、Isomap等距映射

    机器学习降维方法概括   版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/u014772862/article/details/52335970 最近 ...

  7. 【t018】派对

    Time Limit: 1 second Memory Limit: 256 MB [问题描述] N头牛要去参加一场在编号为X(1≤X≤n)的牛的农场举行的派对(1≤N≤1000),有M(1≤M≤10 ...

  8. 代码片段 修改Windows用户名

    cmd /c wmic useraccount where name=' 记录防备忘

  9. js实现小数点四舍五入

    js实现小数点四舍五入 其实这个问题,在之前的面试中被提问到了,由于笔者平时都是用原生的toFixed()的方法来保留小数点,所以当时并没有回答出来这个问题,呜呜呜~.~

  10. 11-28-----vertor和list使用场景

    1.vector拥有一段连续的内存空间,因此支持随机访问,如果需要高效的随机访问,而不子啊胡插入和删除的效率,使用vector, 2.list拥有一段不连续的内存空间,如果需要高效的插入和删除,而不关 ...