准备

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

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. Python3-sqlalchemy-orm 联表查询-无外键关系

    #-*-coding:utf-8-*- #__author__ = "logan.xu" import sqlalchemy from sqlalchemy import crea ...

  2. 01_Keil与Proteus联合仿真的注意事项

    01. 关于keil5和Proteus8的联合仿真的操作步骤,这里就不细说,给个链接,步骤差不多是最齐全的 CSDN博客链接:https://blog.csdn.net/wzk456/article/ ...

  3. 从零开始实现简单 RPC 框架 8：网络通信之 Request-Response 模型

    Netty 在服务端与客户端的网络通信中,使用的是异步双向通信(双工)的方式,即客户端和服务端可以相互主动发请求给对方,发消息后不会同步等响应.这样就会有一下问题: 如何识别消息是请求还是响应? 请求 ...

  4. 【SpringCloud技术专题】「Eureka源码分析」从源码层面让你认识Eureka工作流程和运作机制（上）

    前言介绍 了解到了SpringCloud,大家都应该知道注册中心,而对于我们从过去到现在,SpringCloud中用的最多的注册中心就是Eureka了,所以深入Eureka的原理和源码,接下来我们要进 ...

  5. word域实现动态填充信息附件下载

    1.问题描述:在页面上一些下载附件功能,点击触发执行下载操作时候,有些电脑的浏览器可以,有些电脑的浏览器下载不了,电脑打开弹出的下载框下载的不是一个文件,而是一个如jspx后缀名的页面,jspx后缀是 ...

  6. java9的JShell小工具和编译器两种自动优化

    一.按顺序逐步执行的脚本程序: 二.编译器自动优化 1.不超数据类型范围编译器自动添加强转操作: 2.一但发生运算,byte/short/char都会自动提升为Int,当只有常量参与运算时,编译器会先 ...

  7. jQuery-01

    day01 - jQuery 学习目标: 能够说出什么是 jQuery 能够说出 jQuery 的优点 能够简单使用 jQuery 能够说出 DOM 对象和 jQuery 对象的区别 能够写出常用的 ...

  8. Linux上安装服务器监视工具，名为pyDash。

    pyDash – A Web Based Linux Performance Monitoring Tool 你可以通过以下命令来判断是否已安装: pip --version # Python2.x ...

  9. select后给字段起别名,where和group后不能用，但having后可以

    为什么mysql having的条件表达式可以直接使用select后的别名? SQL语句的语法顺序: FROM -> WHERE -> GROUP BY -> HAVING -> ...

  10. DFS与DFS迷宫问题

    一天蒜头君掉进了一个迷宫里面,蒜头君想逃出去,可怜的蒜头君连迷宫是否有能逃出去的路都不知道. 看在蒜头君这么可怜的份上,就请聪明的你告诉蒜头君是否有可以逃出去的路. 输入格式 第一行输入两个整数n 和 ...