准备

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

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. 重启网络服务 network 出现问题

    2021-08-24 地址冲突了,因为想要设置成静态 ip 一直都不对,情急之下就将本地 ip 设置成了虚拟机的 ip,故出现此错误 后将地址改掉,重启网络服务就没有错误了 一开始我设置的虚拟网卡 n ...

  2. 日常shell练习

    2021-07-19 1.echo的使用 1.1 echo -n 表示不换行输出 # echo输出会自动换行,换行输出两个1 echo 1 echo 1 # 不换行输出,不换行输出两个1 echo - ...

  3. Redis-技术专区-让你彻底会使用“Redis中最陌生且最强大的集合”（ZSET）【前篇】

    前言介绍 很多小伙伴都跟我说,redis中,ZSet(有序集合)是他们最陌生的集合,同时也是觉得特别复杂的集合之一,在开发过程中经常会用到它,而且也是大家最不太有把握使用的集合,所以笔者就从ZSet集 ...

  4. C++11多线程编程

    1. 多线程编程 在进行桌面应用程序开发的时候, 假设应用程序在某些情况下需要处理比较复杂的逻辑, 如果只有一个线程去处理,就会导致窗口卡顿,无法处理用户的相关操作.这种情况下就需要使用多线程,其中一 ...

  5. harbor高可用集群搭建

    高可用harbor集群搭建 一.安装部署 1.节点角色 角色 数量 名称 备注 harbor主节点 2 harbor-1 harbor-2 双主模式 haproxy 2 HA-1 HA-2 需要通过k ...

  6. IPsec 9个包分析（主模式+快速模式）

    第一阶段:ISAKMP协商阶段 1.1 第一包 包1:发起端协商SA,使用的是UDP协议,端口号是500,上层协议是ISAKMP,该协议提供的是一个框架,里面的负载Next payload类似模块,可 ...

  7. 【第一篇】- Maven 系列教程之Spring Cloud直播商城 b2b2c电子商务技术总结

    Maven 教程 Maven 翻译为"专家"."内行",是 Apache 下的一个纯 Java 开发的开源项目.基于项目对象模型(缩写:POM)概念,Maven ...

  8. c++ undefined reference

    记录一次c++编程时发现的问题 报错 undefined reference undefined reference to `Student::~Student()' 下面还有类似的好几行,翻译过来就 ...

  9. css 限制字数

    text-overflow: ellipsis; overflow: hidden; 不过需设置宽高

  10. 探究java的intern方法

    本文主要解释java的intern方法的作用和原理,同时会解释一下经常问的String面试题. 首先先说一下结论,后面会实际操作,验证一下结论.intern方法在不同的Java版本中的实现是不一样的. ...