准备

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

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. vue+Element-ui 的 el-cascader 做高德地图的省市区三级联动并且是异步加载，点击省市区跳转到对应的区（地图可以通过后端返回的点进行标点）

    // 完整版高德地图,可以复制代码直接使用 index.html <script type="text/javascript" src="https://webap ...

  2. 根据短链生成二维码并上传七牛云(Java)

    通过短链生成二维码并上传七牛云(Java) 前言 网上这种帖子其实也是很多,大部分搜出来的是CSDN的,然后点进去一看都几乎一样:所以这次给个自己实践的例子记录. 这次也是通过搜索得到的一部分能实现这 ...

  3. Gitlab（1）- 简单介绍

    什么是 Gitlab 一个开源分布式版本控制系统 开发语言:Ruby 功能:管理项目源代码.版本控制.代码复用与查找.权限管控 Git 家族成员 Git:是一种版本控制系统,是一个命令,是一种工具 G ...

  4. Gitlab（2）- centos7.x 下安装社区版 Gitlab 以及它的配置管理

    前置准备:虚拟机安装以及配置相关 包含安装 centos7.8 虚拟机.设置静态 ip 等 https://www.cnblogs.com/poloyy/category/1703784.html 注 ...

  5. 【Python从入门到精通】（二十五）Python多进程的使用

    您好,我是码农飞哥,感谢您阅读本文,欢迎一键三连哦. 本篇重点介绍Python多进程的使用,读者朋友们可以将多进程和多线程两者做一个对比学习. 干货满满,建议收藏,需要用到时常看看. 小伙伴们如有问题 ...

  6. 通过JDK动态代理实现 Spring AOP

    1.新建一个目标类 接口:public interface IUserService //切面编程 public void addUser(); public void updateUser( ); ...

  7. 对easyui-validatebox的验证类型的扩展--补充

    一.说明 这篇文章是<对easyui-validatebox的验证类型的扩展>的补充.在工程的持续开发中,我们又对此进行了更多的补充. 二.补充代码 增加了更多的验证类型. /* * 比较 ...

  8. MySQL日志管理、备份、恢复

    目录: 一.MySQL 日志管理 二.数据库备份的重要性与分类 三.常见的备份方法 四.MySQL完全备份 五.数据库完全备份分类 六.MySQL增量备份 七.MySQL数据库增量恢复 八.MySQL ...

  9. 类型定义VS类型别名

    类型定义是在当前包中的一直存在的.输出%T,发现类型前面都有main.前缀 类型别名,其实还是它的根本类型,别名只存在在代码中.编译后就不存在了,还是根本类型.

  10. Vue3的新特性及相关的Composition API使用

    首先 创建项目 Vue3 Vue3 相较于Vue2 的6大亮点: 1 性能快. 2 按需编译 体积更小 3 提供了组合API 类似于react 的React Hooks 4 更好的Ts支持 5 暴露了 ...