准备

先设计一个承载轮播图的区域：四周向外阴影、扁平圆角：

1 #myShuffArea{

2                 width: 50%;

3                 height: 300px;

4                 border: solid 1px gainsboro;

5                 border-radius:5%;

6                 /*x:0,y:0就是四周*/

7                 box-shadow: 0px 0px 10px 5px lightgrey;

8             }

向该区域内放入轮播内容：

 1 <body>

 2         <div class="container">

 3             <!--自己定义的收容轮播的区域-->

 4             <div id="myShuffArea">

 5                 <div id="myCarousel" class="carousel slide" data-ride="carousel">

 6                     <!--轮播指标-->

 7                     <ol class="carousel-indicators">

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

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

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

11                     </ol>

12                     <!--轮播项目-->

13                     <div class="carousel-inner">

14                         <div class="item active">

15                             <img src="../img/feichang/bbbg.jpg" alt="图1"/>

16                         </div>

17                         <div class="item">

18                             <img src="../img/login/bg.jpg" alt="图2"/>

19                         </div>

20                         <div class="item">

21                             <img src="../img/login/touxiang.jpg" />

22                         </div>

23                     </div>

24                     <!-- 轮播（Carousel）导航 -->

25                     <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">

26                         <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>

27                         <span class="sr-only">Previous</span>

28                     </a>

29                     <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">

30                         <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>

31                         <span class="sr-only">Next</span>

32                     </a>

33                 </div>

34             </div>

35         </div>

36         <!--修改延迟事件：变快-->

37         <script>

38             $(function(){

39                 $('#myCarousel').carousel({interval:2000});

40             })

41         </script>

42     </body>

基于BootStrap的轮播图的更多相关文章

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

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

  2. Bootstrap中轮播图

    Bootstrap中轮播图插件叫作Carousel,为了清晰的表明每个标签在这里是什么意思,我把解释写在了下面的代码中. <!-- 以下容器就是整个轮播图组件的整体, 注意该盒子必须加上 cla ...

  3. 聊一聊 bootstrap 的轮播图插件

    今天做工作的时候,轻车熟路的做完,又用到了bootstrap的轮播图,觉得有必要安利一下这个插件,如果你需要的轮播图.功能不需要太炫酷,那么bootstrap的插件是你的首要选择. 使用方式 引入js ...

  4. 基于css制作轮播图的部分效果

    在轮播图中,我们可以通过鼠标在特定位置上的滑动来实现元素背景的改变.通常在制作轮播图时,我们首先想到的是js中的交互.可是,如果我们无法使用js,只能单纯的靠css又该如何实现这一效果呢?下面,本人将 ...

  5. Bootstrap实现轮播图

    第一步:设计轮播图容器:div.carousel,添加slide平滑切换,并定义id,方便后面采用data属性来触发 <div class='carousel slide' id="t ...

  6. ⒃bootstrap组件 轮播图 基础案例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 基于skitter的轮播图炫酷效果，幻灯片的体验

    概述 包含各种炫酷的轮播切换效果,插件小巧,与其他插件无冲突,可用于移动端和PC端 详细 代码下载:http://www.demodashi.com/demo/11939.html 你还在用原生的js ...

  8. JS 基于面向对象的 轮播图1

    ---恢复内容开始--- 1 'use strict' 2 function Tab(id){ 3 if(!id)return; 4 this.oBox = document.getElementBy ...

  9. JS 基于面向对象的 轮播图2

    <script> // 函数不能重名, --> 子函数 // is defined function --> 函数名是否写错了 function AutoTab(id) { T ...

随机推荐

  1. Ubuntu 配置、使用samba共享文件夹

    安装库 sudo apt install smbclient samba samba-common 启动samba sudo /etc/init.d/samba start 备份配置文件 sudo c ...

  2. GO的GC辣鸡回收（一）

    用户程序通过内存分配器(Allocator)在堆上申请内存,而垃圾收集器(Collector)负责回收堆上的内存空间,内存分配器和垃圾收集器共同管理程序中的堆内存空间. 基本概念 垃圾分类 语义垃圾: ...

  3. CentOS7系统搭建FTP服务器

    创建FTP服务器1.安装FTP服务 yum install -y vsftpd 默认的FTP服务的配置文件路径为/etc/vsftpd cd /etc/vsftpd[root@test924 vsft ...

  4. HCNP Routing&Switching之动态路由协议IS-IS基础

    前文我们了解了OSPF的特殊区域相关话题,回顾请参考https://www.cnblogs.com/qiuhom-1874/p/15236330.html:今天我们来聊一聊另一动态路由协议IS-IS相 ...

  5. Appium问题解决方案（3）- java.lang.IllegalStateException: UiAutomation not connected!

    背景 连着手机,运行脚本,一段时间之后就报错了,看了Appium-server,发现报了这样一个错误 如何解决呢? 步骤一 通过 adb devices ,确定设备是否已连接上 步骤二(最终解决方案) ...

  6. vue 动态ip配置,避免重复打包

    目前比较流行的打包大都是在vue.config.js配置代理,然后在根目录新建.env.xxx文件配置正式环境,测试环境,开发环境等用于打包时配置不同的访问地址,作为一名随波逐流的前端开发,我也是这么 ...

  7. .net Core 基于EF Core 实现数据库上下文

    在做项目时,需要将某一些功能的实体建立在另一个数据库中,连接不同的数据库用以存储记录.通过查找资料,实现EF Core上下文. 下面是实现上下文后的解决方案的目录: 1.UpAndDownDbCont ...

  8. 第24篇-虚拟机对象操作指令之getfield

    getfield指令表示获取指定类的实例域,并将其值压入栈顶.其格式如下: getstatic indexbyte1 indexbyte2 无符号数indexbyte1和indexbyte2构建为(i ...

  9. redis的集群安装

    1.创建安装目录 在master ,node1 ,node2中分别创建 mkdir /usr/local/soft/redis-cluster 2.将redis 复制到redis-cluster 目录 ...

  10. Django学习day04随堂笔记

    每日测验 """ 今日考题 1.列举你知道的orm数据的增删改查方法 2.表关系如何判定,django orm中如何建立表关系,有什么特点和注意事项 3.请画出完整的dj ...