准备

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

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. JVM双亲委派模型及其优点

    JVM双亲委派模型及其优点 什么是双亲委派模型? 双亲委派模型: ​ 如果一个类加载器收到了类加载请求,它并不会自己先去加载,而是把这个请求委托给父类的加载器去执行,如果父类加载器还存在其父类加载器, ...

  2. spring boot 系列之七：SpringBoot整合Mybatis

    springboot已经很流行,但是它仍需要搭配一款ORM框架来实现数据的CRUD,之前已经分享过JdbcTemplete和JPA的整合,本次分享下Mybatis的整合. 对于mybatis的使用,需 ...

  3. 数据导出生成Excel附件使用POI的HSSFWorkbook对象

    比较常用的实现Java导入.导出Excel的技术有两种Jakarta POI和Java Excel.Jakarta POI 是一套用于访问微软格式文档的Java API.Jakarta POI有很多组 ...

  4. 生成随机uuid

      /**  * 生成随机uuid  */ export function uuid() {   return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.repla ...

  5. K8s工作流程详解

    在学习k8s工作流程之前,我们得再次认识一下上篇k8s架构与组件详解中提到的kube-controller-manager一个k8s中许多控制器的进程的集合. 比如Deployment 控制器(Dep ...

  6. 如何将 Ubuntu 版本升级到新版本

    @ 目录 0.将 Ubuntu 版本升级到新版本的注意事项 1.以图形方式升级到 Ubuntu 20.04(适用于桌面用户) 2.使用命令行升级到 Ubuntu 21.10 本教程通过从 Ubuntu ...

  7. POJ1426——Find The Multiple

    POJ1426--Find The Multiple Description Given a positive integer n, write a program to find out a non ...

  8. C语言使用getch()读取方向键

    初衷: 在解决N皇后问题时需要使用方向键实现布局切换,于是就在网上查找资料,感觉自己收获不小,就把自己总结的一些知识点给记录下来. 总结: 1.getch()读取字符需要一次. 2.getch()读取 ...

  9. Stage 1 项目需求分析报告

    迷你商城后台管理系统-- 需求分析 1． 引言 作为互联网热潮的崛起,消费者们的普遍差异化,实体商城要想在互联网的浪潮中继续发展,就需要制定出针对用户以及消费者的消费习惯以及喜爱品种的消费方案.从而企 ...

  10. 深入学习Composer原理（三）

    本系列第三篇文章,一起了解下PSR规范中的PSR4和PSR0规范 首先恭喜大家,包括我自己,坚持到了现在.这篇文章之后,Composer的基础原理就清晰明了咯.也就是说,Composer所利用的正是s ...